如何实现锚点标签点击后持久显示border-bottom样式？

嘿，我明白你的需求啦——点击某个排序选项（比如Date）后，要让它的下划线一直显示，直到点击其他选项。你之前用的:active和:target确实没法实现持久选中的效果，因为:active只在鼠标按住元素时生效，:target依赖URL锚点，切换起来不太灵活。咱们用JavaScript配合CSS类来搞定这个问题，很简单的！

修改后的完整代码 #

<!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; }
/* 新增的选中状态类 */
.sortType.active { 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>

<script>
// 获取所有排序选项元素
const sortOptions = document.querySelectorAll('.sortType');

// 给每个选项添加点击事件
sortOptions.forEach(option => {
  option.addEventListener('click', function(e) {
    // 阻止默认跳转行为（因为href是#）
    e.preventDefault();
    // 先移除所有选项的active类
    sortOptions.forEach(opt => opt.classList.remove('active'));
    // 给当前点击的选项添加active类
    this.classList.add('active');
  });
});
</script>
</body>
</html>

关键说明 #

• 首先在CSS里新增了一个.active类，专门用来标记选中状态的下划线样式，和hover效果保持一致。
• JavaScript部分：
  1. 先获取所有带sortType类的元素；
  2. 给每个元素绑定点击事件；
  3. 点击时先移除所有选项的active类，确保只有当前选中的选项有下划线；
  4. 给当前点击的元素添加active类，实现持久选中效果；
  5. 用e.preventDefault()阻止#带来的页面跳转（比如滚动到顶部）。

这样点击任意选项后，它的下划线就会一直显示，直到你点击其他选项啦！

内容的提问来源于stack exchange，提问作者AngularDoubts