HTML/CSS -- 如何添加选中状态答案

【问题标题】：HTML/CSS -- How to add a selected stateHTML/CSS -- 如何添加选中状态
【发布时间】：2014-02-05 11:16:30
【问题描述】：

在我的网页顶部，我的所有链接都是这样水平排列的：

链接 1 链接 2 链接 3 等等...

我想要做的是，例如，当您单击链接 1 时，会在 css 中添加一个border-bottom:1px solid #000。如果我要单击链接 2，那么链接 1 上的边框底部将设置为“无”，而边框底部：1px 实心 #000 将设置在链接 2 上。

我想我想问的是，如何将 onclick 处理程序添加到菜单栏中的所有链接？这样，一个“选定”类将被添加到当前页面的链接中，当我单击另一个链接时，该类将被删除并添加到下一个链接中。

我尝试过使用 javascript，但在添加所选类后无法删除它。关于如何完成此任务的任何建议？

【问题讨论】：

jQuery 有一个简单的toggleClass 函数：api.jquery.com/toggleClass。你以前用过 jQuery 吗？
页面内容是通过 javascrt 更新到位还是加载了新页面？

标签： javascript html css

【解决方案1】：

这样的？

<ul id="nav">
    <li><a class="menu" href="#">1</a></li>
    <li><a class="menu" href="#">2</a></li>
    <li><a class="menu" href="#">3</a></li>
  </ul>

然后

$('a.menu').click(function(){
    $('a.menu').removeClass("active");
    $(this).addClass("active");
});

然后在你的 css 中使用那个活动类

.active{
  border-bottom: 1px solid #ccc;
}

【讨论】：

【解决方案2】：

您可以使用 jQuery：将其添加到 onclick 里面

$("#id").addClass("classname");

<style>
#id { 
height: 20px;
width: 20px;
}
.classname { 
 display: none; 
}
</style>
<a href="#" onclick="$("#id").addClass("classname");">Link 1</a>
<div id="id"></div>

【讨论】：