Question

我有这个菜单：

<ul id="mainmenu" class="nav menu sf-menu responsive-menu superfish">
    <li class="active">
        <a href="index.php">Home</a>
    </li>
    <li class="">
        <a href="search.php">Search</a>
    </li>
    <li class="">
        <a href="search.php">Browse</a>
    </li>
</ul>

这个小小的脚本：\

var selector = '#mainmenu li';
$(selector).on('click', function() {
    $(selector).removeClass('active');
    $(this).addClass('active');
});

我想要的是，当页面第一次加载home成为活动链接时。然后，当用户在另一个页面上导航时，active类将应用于点击的li。问题是，当我点击另一个li时，会添加该类，然后快速删除。可能是什么问题？谢谢！

Answer 1

我认为问题在于，当您单击某个元素时，您将被重定向，并再次呈现该页面。

var selector = '#mainmenu li';
$(selector).on('click', function(event) {
    event.preventDefault();
    $(selector).removeClass('active');
    $(this).addClass('active');
});

尝试禁用重定向事件以确认这一点。

Answer 2

刚刚关闭你提供的详细信息，我假设你没有加载AJAX，所以当你点击链接时，是的，这个类被添加，然后你被带到不同的页面加载新鲜

除非你通过AJAX加载外部链接，否则没有真正的方法可以实现你想要的javascript，我无法真正为你提供一个有效的代码示例，因为它很少适合所有人。

http://api.jquery.com/load/可能是你感兴趣的东西。它允许你将一个外部页面加载到一个元素中（即你的主要内容元素）

Answer 3

重定向使脚本（如果我可以说）＆＃39;短暂的＆＃39;因为脚本会在第一页加载，然后在第二页中加载，而不知道链接是否被点击过。

Answer 4

当您点击链接时，它会始终加载新页面并删除您添加的课程。以下代码段将解决您的问题。

 var pgurl = window.location.href;
 $("#mainmenu li a").each(function(){
      $(this).siblings().removeClass("active");
      if(pgurl.indexOf($(this).attr("href"))>-1){
          $(this).addClass("active");
      }
 })

Answer 5

单击链接后，看起来页面会刷新。尝试根据其href将活动类添加到li。

示例代码：

         var url = window.location;

    jQuery('a[href="'+url+'"]').parent().addClass('active');

菜单li添加和删除类

5 个答案: