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

有人能帮我写代码吗？我想把不同风格的当前链接，我已经选择。超链接不会指向不同的页面，它们都指向当前页面

这是我的密码：

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来实现这一点。您需要一些Javascript来实现这一点。（显然可以，请参见编辑）

尽管您的问题没有标记为jQuery和/或Javascript，但下面是一个如何使用jQuery进行标记的示例：

演示：

相关jQuery代码：

---

编辑：显然，您可以有一个“仅CSS”解决方案： 其想法是使用带有相应标签的隐藏单选按钮。无线电

输入

s保留在锚外部（因为输入不是锚的有效内容），而标签由锚包裹

演示2:

相关HTML：

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

---

您可以使用jquery代码单击更改

。当前类

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

首先检查

，以下是

我同意：

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

---

当有人单击指向ID的链接时，您想更改样式吗？为此，您需要Javascript…Dominik是对的，单击后，您需要一些脚本来从元素中删除“当前”类，然后将其添加到活动链接元素（当然还有当前类的样式）耶..我将如何使用Javascript做到这一点？谢谢：）也许这就是你要找的@kheemaPandey是的..这就是我要找的..非常感谢：）如果我的解决方案对你有效，那么你可以接受这个答案。这将有效，尽管没有理由再次在“单击”函数中扫描整个DOM。您已经有了“$（this）”元素，从中获取“current”元素要比重新搜索整个页面快得多。

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

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

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