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

~~您不能仅使用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”解决方案：

这个想法是使用带有相应标签的隐藏单选按钮。收音机input仍在锚点之外（因为输入不是锚点的有效内容），而标签则由锚点包裹。

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

相关CSS：

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

Answer 2

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

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

检查 DEMO 。

Answer 3

首先，这是 Fiddle Demo

我去了：

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

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

3 个答案:

编辑：显然，您可以使用“仅限CSS”解决方案：