单击时当前链接的不同样式

Question

有人可以帮我写代码吗？我想放置我选择的当前链接的不同样式。超链接不会指向不同的页面，它们都指向当前页面。

这是我的代码：

HTML

<nav id="nav">
<ul>
<li class="current"><a href="#top" id="top-link" ><span>Home</span></a></li>
<li><a href="#portfolio" id="portfolio-link"><span>Portfolio</span></a></li>
<li><a href="#about" id="about-link"><span>About</span></a></li>
</ul>
</nav>

CSS

#nav ul li a:hover
 {
  color:#FFF;
  background-color:#333;
 }

 #nav ul li a:active
 {
 color:#FFF;
 background-color:#333;
 }

FIDDLE DEMO HERE

Answer 1

您可以使用 jquery 代码更改点击时的.current class。

var links = $('#nav li');
links.click(function() { 
$(this).parent().find(".current").removeClass('current');
$(this).addClass('current');
 });

检查DEMO。

Answer 2

首先，这里是 Fiddle Demo

我去了：

$('li').on('click', function(){
    $(this).addClass('current')
        .siblings().removeClass('current');
});

Answer 3

你不能只用 CSS 来做到这一点。您将需要一些 Javascript 来实现这一目标。 （显然你可以，见编辑）

即使您的问题没有标记为 jQuery 和/或 Javascript，以下是如何使用 jQuery 执行此操作的示例：

演示：http://jsfiddle.net/abhitalks/yW3Yt/1/

相关的jQuery代码：

$("a").on("click", function() {            // bind click event on all anchors
    $("li").removeClass("current");        // remove current class from all list-items
    $(this).parent().addClass("current");  // add current class to the parent of clicked anchor
});

---

编辑：显然，你可以有一个“仅 CSS”的解决方案：

这个想法是使用带有相应标签的隐藏单选按钮。无线电inputs 保留在锚点之外（因为输入不是锚点的有效内容），而标签被锚点包裹。

演示 2：http://jsfiddle.net/abhitalks/yW3Yt/4/

相关 HTML：

<ul>
    <li>
        <input type="radio" name="opt" id="opt1"/>
        <a href="#top" id="top-link"><label for="opt1">Home</label></a>
    ...

相关CSS：

input[name="opt"] {
    display: none;
}
input[name="opt"]:checked + a {
    background-color: yellow;
}