时间戳

首页 > 解决方案 > css活动链接边界半径

html - css活动链接边界半径

问题描述

当我单击链接按钮时，我希望它更改底部半径并使其与该表单保持活动状态。但是，当我单击按钮时，半径会发生变化，但随后会变回原来的样子。我认为这是因为我使用了 :active 选择器，它在用户单击它时起作用。有没有办法让按钮在单击后保持新的半径形式，并在我再次单击时将其更改回原始形式？单击时的外观：[![在此处输入图像描述][1]][1]

 .border {
      border-radius: 10px 10px 10px 10px;
      background-color: red;
      color: white;
    }
    
    a.border:active {
      border-radius: 10px 10px 0px 0px;
    }
<!doctype html>
<html lang="en">
<head>
  <title>Hello, world!</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
  <div class="container d-flex align-items-center">
    <div class="col-6 mt-5">
      <a class="nav-link collapsed border activeradius" href="#submenu1" data-toggle="collapse" data-target="#submenu1">Testing</a>
    </div>
  </div>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
  <script src="js/bootstrap.min.js"></script>
  <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> -->
  <script src="js/parallax.js"></script>
</body>
</html>

我对网页设计还是新手，所以非常感谢任何反馈。[1]：https ://i.stack.imgur.com/nBjFI.png

标签： htmlcsstwitter-bootstrap

解决方案

这会做，这就是你想要的：

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
.border {
  border-radius: 10px 10px 10px 10px;
  background-color: black;
   color: darkgreen !important;
}

.active {
  background-color: red !important;
  color: white;
  border-radius: 10px 10px 10px 10px;
}
 </style>
</head>

<body>
  <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <div class="container">
        <button id="button" type="button" class="btn btn-primary">Primary</button>
      </div>
      <script>
      $("button").click(function() {
  $(this).toggleClass("active border")
});</script>
</body>

</html>

推荐阅读