addClass in JQuery

Question

我在JQuery方面很新，我有一个关于addClass()的问题。我花了一些时间试着让它发挥作用，但似乎我做错了什么。我创建了一个带有HTML和引导的顶级菜单。我假设访问者会首先登陆我的index.php，所以我为我的index.php创建了class=“活动”。然后，如果他们点击顶部菜单上的任何其他链接(例如。，则class="active“将添加到index.php的"li”选项卡中，并从index.php的“li”选项卡中删除“active”。

下面是我的HTML代码：

<div class="nav-collapse collapse">  
    <ul class="nav pull-right">
        <li id="home" class="active"><a href="index.php"> Home</a></li>
        <li id="about"><a href="about_us.php"> About Us</a></li>
        <li id="browse"><a href="browse.php"> Browse</a></li>
        <li id="contact"><a href="contact.php"> Contact</a></li>
    </ul> 
</div>

下面是我使用的JQuery代码，并试图完成这个任务。

$(function (){              
   var sidebar = $('.nav');
sidebar.delegate("li", "click", function(){ 
    if($(this).hasClass('active')){ 
    //If click on the tab that is currently active, it will do nothing.  
    }else{      
            sidebar.find('.active').addClass('inactive'); 
            sidebar.find('.active').removeClass('active');   
            $(this).removeClass('inactive');            
            $(this).addClass('active'); 
         }
     });
});

我在本地服务器上测试过。在我点击菜单后，我可以看到顶部菜单上的选项卡变成灰色，但它没有留下。所以我肯定我做错了什么，但不确定在哪里。我在JQuery是新来的，所以我希望我能向你们学习。谢谢!

Answer 1

当单击链接时，它会将浏览器带到一个全新的页面，该页面将启动一个全新的javascript环境，而您对当前页面所做的任何操作都不会转移到新加载的页面上。

因此，active类可以在当前页面上进行更改，但随后会加载一个全新的页面，它不会继承第一个页面中的任何内容(例如，它从头开始)。加载新页后，第一页中的代码将不再起作用。

您要么只需将活动类编码到每个单独的页面中(因为每个页面都知道它是什么页)，要么需要有一个公共的JS集，在页面基于URL加载时设置活动类，以便在页面加载时正确地对其进行降级。

而且，您可能不需要一个非活动类。默认CSS状态可以表示非活动外观，活动类可以应用CSS覆盖来显示活动状态。

Answer 2

这不起作用，因为当有人单击另一个链接时，他们会被重定向到另一个页面。但是，您的标题并不知道单击了哪个链接，也不知道它在哪个页面上。你需要让你的标题知道你是哪一页。这有道理吗？

Answer 3

其他答案是正确的，当您单击标记时，您将打开一个新页面，从而丢失您的javascript环境。

如果您想拥有一个页面应用程序，可以使用preventDefault阻止浏览器跟踪链接。

sidebar.delegate("li", "click", function(e){
    e.preventDefault();
    if($(this).hasClass('active')){ 
        //If click on the tab that is currently active, it will do nothing.
    }else{
        sidebar.find('.active').addClass('inactive'); 
        sidebar.find('.active').removeClass('active');   
        $(this).removeClass('inactive');            
        $(this).addClass('active');
     }
 });