Question

我敢打赌这就像123一样容易，但我有一个带JS的导航，它动态地将一个类“活动”添加到当前活动的“li a”元素。如何更改JS代码，以便在页面加载Home链接（显示用户进入页面时的第一个链接）时，它上面有“.active link”。这是我的榜样！

http://jsfiddle.net/SZ63C/

JS：

$('li a').click(function (e) {
    e.preventDefault();
    $('a').removeClass('active');
    $(this).addClass('active');
});

首页链接应该从一开始就是“活跃”类...

请查看jsfiddle并尽可能帮助我。

Answer 1

你可以在你的html中为你的主页链接添加活跃课程，你不需要javascript来处理这个问题。

  <li><a href="#Home" class="scroll active">Home</a></li>
                                 //-^^^^^^--here

如果你想要，那么你可以使用eq ..

$('.scroll:eq(0)').addClass('active');

在你的document.ready功能

中

fiddle here

Answer 2

 $(document).ready(function(){
   $('li a:eq(0)').addClass("active");// here add active class on load
    $('li a').click(function(e) {
            e.preventDefault();
            $('a').removeClass('active');
            $(this).addClass('active');
        });
});

参见 demo

参考 eq-selector

Answer 3

你可以这样做：

$('.scroll').first().addClass('active');

使用.first()方法获取第一个链接。
然后将active课程添加到链接。

演示：Fiddle

一个简单的效果提示：

使用以下代码仅从已经拥有该类的链接中删除类。没有必要从所有链接中不必要地删除类。

$('a.active').removeClass('active');

这将查找具有active类的所有链接，然后删除该类，从而减少必须检查所有链接并提高效率的范围。

Answer 4

如果您希望在任何页面上动态添加活动类，请尝试这样的操作。

$("li a").each(function(){
   if( $(this).attr('href').indexOf( window.location.pathname ) !== -1 ){
       $(this).addClass('active');
       return false; // case found, break each loop;
   }
});

否则，如果您只想将其添加到“主页”链接，请不要再尝试：

$("li a").first().addClass("active");

Answer 5

使用文档就绪功能并将代码写入其中。从以下链接获取帮助： http://learn.jquery.com/using-jquery-core/document-ready/

为“Home”链接JS添加活动类

5 个答案: