javascript - 为“主页”链接 JS 添加活动类

Question

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

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 函数中

在这里摆弄

Answer 2

你可以这样做：

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

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

演示：小提琴

一个简单的性能提示：

使用下面的代码仅从已经具有类的链接中删除类。没有必要从所有链接中删除类。

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

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

Answer 3

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

$("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 4

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

Answer 5

 $(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');
        });
});

看演示

参考eq 选择器