Question

我的网站有一个由锚点组成的固定导航。我希望文本在单击时更改颜色，以便直观地表示活动状态，因此必须动态地将类添加到链接标记。

我想我需要一些jQuery！问题：我还在学习，对如何实现这个目标一无所知......

这是我的HTML：

    <nav>
        <ul>
            <li class="menu_border"><a href="#accueil">ACCUEIL</a></li>
            <li class="menu_border"><a href="#projets">PROJETS</a></li>
            <li class="menu_border"><a href="#services">SERVICES</a>/li>
            <li class="menu_border><a href="#contact">CONTACT</a></li>
        </ul>
    </nav>

谢谢！

Answer 1

您可以使用诸如...之类的内容。

$("nav ul").on("click", ".menu-border", function() {
    $(this).addClass("active").siblings().removeClass("active");
});

然后在CSS中定义active类。

Answer 2

$("nav a").bind("click", function() {
$("nav a.active").removeClass("active");
$(this).addClass("active"). 

});

Answer 3

将此添加到您的smooth-scroll.js文件（或您正在使用的任何文件），或者您可以在当前页面中打开脚本：

//current highlight
$('nav ul li a').click(function() {
    $('nav ul li a').removeClass("current");
    $(this).addClass('current');
});

然后将其添加到您的CSS：

.current 
{
    color: #ff6600 !important;
}

Answer 4

这是对Alex的修复，他有语法错误。

 $("nav ul").click( function() {
        $(this).addClass("active").siblings().removeClass("active");
    });

活动项：使用jQuery向锚添加类

4 个答案: