代码之家 › 专栏 › 技术社区 › KevinM

css活动链接边框半径

twitter-bootstrap css html

KevinM · 技术社区 · 7 年前

当我单击链接按钮时,我希望它更改底部半径,并使其在该窗体中保持活动状态。但是,当我单击按钮时,半径会改变,但随后又会像原来一样改变。我假设这是因为我使用了: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

2 回复 | 直到 7 年前

Scath Adam Robinson 7 年前

可以通过添加如下活动类来完成此操作:

$("#nav-link").click(function() {
  $(this).toggleClass("active border")
});

.border {
  border-radius: 10px 10px 10px 10px;
  background-color: red;
  color: white;
}

.active {
  background-color: red;
  color: white;
  border-radius: 10px 10px 0px 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!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 id="nav-link" 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>

Nikhil 7 年前

这就行了,这就是你想要的:

<!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>