我是 JQuery 的新手,我有一个关于 addClass() 的问题。我花了一些时间来尝试让它工作,但似乎我做错了什么。我用 HTML 和 bootstrap 创建了一个顶级菜单。我假设访问者会首先登陆我的 index.php,所以我为我的 index.php 创建了 class="active"。然后,如果他们单击顶部菜单上的任何其他链接(例如关于我们),则 class="active"将添加到 index.php 的“li”选项卡中并从中删除 class="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 的新手,所以我希望能向你们学习。谢谢!
最佳答案
单击链接时,浏览器将转到一个全新的页面,该页面启动一个全新的 javascript 环境,您对当前页面所做的任何操作都不会转移到新加载的页面。
因此,事件类可能会在当前页面上更改,但随后会加载一个全新的页面,它不会从第一页继承任何内容(例如,它从头开始)。加载新页面后,第一页中的代码将不再起作用。
您需要将事件类编码到每个单独的页面中(因为每个页面都知道它是什么页面)或者有一组通用的 JS 在页面加载时根据 URL 设置事件类,以便初始化页面加载时正确。
此外,您可能不需要非事件类。默认 CSS 状态可以表示非事件外观,事件类可以应用 CSS 覆盖来显示事件状态。
关于javascript - 在 JQuery 中添加类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19341056/