Question

我有一个带有三个链接的示例代码。

<!DOCTYPE html>
<html>
<head>
<style>
a.sortType {
  text-decoration: none;
  color: black;
}

.sortLabel {
  text-decoration: none;
  color: black;
 margin-right: 15px;
 }
 
 .sortType {
 margin-right: 15px;
 }
 .sortType:hover{
 border-bottom: 1px solid violet;
 }
 
 a.sortType:active {
 border-bottom: 1px solid violet;
 }

 a.sortType:target {
 border-bottom: 1px solid violet;
 }

</style>
</head>
<body>
<div >
<a href="#" class="sortLabel">Sort By:</a>
<a href="#" class="sortType">Date</a>
<a href="#" class="sortType">Place</a>
<a href="#" class="sortType">Name</a>
</div>
</body>
</html>

我可以在选项悬停时显示边框底线。现在，我试图在所选选项上保持边框底线。单击某个选项时，说出“日期”，它应该有底线，直到我单击其他选项为止。我试过了但是不能成功。请帮忙。提前致谢。

Answer 1

如果不需要锚标记，则可以使用单选按钮输入和标签以及:checked伪选择器和adjacent sibling combinator来实现您的目标正在寻找。

<!DOCTYPE html>
<html>
<head>
<style>
a.sortType {
  text-decoration: none;
  color: black;
}

.sortLabel {
  text-decoration: none;
  color: black;
 margin-right: 15px;
 }
 
 .sortType {
 margin-right: 15px;
 }
 .sortType:hover{
 border-bottom: 1px solid violet;
 }
 
 a.sortType:active {
 border-bottom: 1px solid violet;
 }

 a.sortType:target {
 border-bottom: 1px solid violet;
 }

input[type="radio"]{
  display: none;
}
input[type="radio"]:checked + .sortType{
 border-bottom: 1px solid violet;
}

</style>
</head>
<body>
<div >
<a href="#" class="sortLabel">Sort By:</a>

<input id="date" name="sort" value="date" type="radio">
<label for="date" class="sortType">Date</label>

<input id="place" name="sort" value="date" type="radio">
<label for="place" class="sortType">Place</label>

<input id="name" name="sort" value="date" type="radio">
<label for="name" class="sortType">Name</label>

</div>
</body>
</html>

我添加的关键CSS是

input[type="radio"]:checked + .sortType{
    border-bottom: 1px solid violet;
}

将任何.sortType元素设置为紧随选中的单选输入之后的样式。

Answer 2

添加:focus

<!DOCTYPE html>
<html>
<head>
<style>
a.sortType {
  text-decoration: none;
  color: black;
}

.sortLabel {
  text-decoration: none;
  color: black;
 margin-right: 15px;
 }
 
 .sortType {
 margin-right: 15px;
 }
 .sortType:hover{
 border-bottom: 1px solid violet;
 }
 
 a.sortType:active, a.sortType:focus {
 border-bottom: 1px solid violet;
 }

 a.sortType:target {
 border-bottom: 1px solid violet;
 }

</style>
</head>
<body>
<div >
<a href="#" class="sortLabel">Sort By:</a>
<a href="#" class="sortType">Date</a>
<a href="#" class="sortType">Place</a>
<a href="#" class="sortType">Name</a>
</div>
</body>
</html>

Answer 3

//code for styling the active element
var $links = $('a').click(function () {
   $('a').removeClass('clicked');
   $(this).addClass('clicked');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
a.sortType {
  text-decoration: none;
  color: black;
}

.sortLabel {
  text-decoration: none;
  color: black;
 margin-right: 15px;
 }
 
 .sortType {
 margin-right: 15px;
 }
 .sortType:hover{
 border-bottom: 1px solid violet;
 }
 
 a.sortType:active {
 border-bottom: 1px solid violet;
 }

 a.sortType:target {
 border-bottom: 1px solid violet;
 }
 

 .clicked {
  border-bottom: 1px solid violet;
}

</style>
</head>
<body>
<div >
<a href="#" class="sortLabel">Sort By:</a>
<a href="#" class="sortType">Date</a>
<a href="#" class="sortType">Place</a>
<a href="#" class="sortType">Name</a>
</div>
</body>
</html>

有很多方法可以执行此操作，我们可以使用简单的jQuery click函数在锚定标记单击上添加或删除活动类，并为活动类设置样式，希望此解决方案有助于解决您的问题。注意：我们可以在锚标记中添加一个通用类并定位到特定类，将来如果锚标记太多，则需要根据其父类或特定类来定位锚标记。

Answer 4

当用户点击skip = False for line in fileContent: if "RSN 3" in line: skip = True continue if "RSN " in line and "RSN 3" not in line: skip = False # rest of the logic if skip: continue时，您只需为 addClass 添加基本的JavaScript脚本。我只添加了a类。试试这个，希望对您有所帮助。谢谢

active

document.addEventListener('click', function (e) {
  var all = document.querySelectorAll('.sortType')
  if (e.target.matches('.sortType')) {
    e.preventDefault();
    for (var i = 0; i < all.length; i++) {
      all[i].classList.remove('active')
    }
    e.target.classList.add("active");
  }                        
}, false);

.reqborder
{
border-bottom:1px solid violet
}
 

a.sortType {
  text-decoration: none;
  color: black;
}

.sortLabel {
  text-decoration: none;
  color: black;
 margin-right: 15px;
 }
 
 .sortType {
 margin-right: 15px;
 }
 .sortType:hover{
 border-bottom: 1px solid violet;
 }
 
 a.sortType.active {
 border-bottom: 1px solid violet;
 }

Answer 5

您可以将锚标记保留在li中，然后将样式应用于li-item。

w3schools的一个简单的导航菜单示例，您可以遵循：

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;  
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
  border-bottom: 2px solid red;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

锚点单击CSS的border-bottom

5 个答案: