jQuery导航活动类在页面重新加载时恢复
我在应用程序的每个页面上都加载了以下脚本:jQuery导航活动类在页面重新加载时恢复,jquery,Jquery,我在应用程序的每个页面上都加载了以下脚本: $(document).ready(function() { $('ul li').click(function(){ $("li").removeClass("current_page_item"); $(this).addClass("current_page_item"); }); }); 我的导航html如下所示:
$(document).ready(function() {
$('ul li').click(function(){
$("li").removeClass("current_page_item");
$(this).addClass("current_page_item");
});
});
我的导航html如下所示:
<ul id="dropmenu">
<li class="active">
<%= link_to 'Home Page', welcome_index_path %>
</li>
<li>
<%= link_to 'Business Owners', business_owners_path %>
</li>
</ul>
每次单击“Business Owners”链接时,用于标识活动页面的图像首先从主页链接移动到Business Owners链接,然后在重新加载页面时快速恢复到主页链接。jQuery中有没有一种方法可以在页面加载后保持“活动”链接的状态?如果没有更多信息,我相信您可能会用错误的方法来实现这一点。您是否正在尝试使用deeplinking来显示/加载额外内容?如果是这样,则不应重新加载页面。您可以使用jquery地址来实现这一点 如果您的页面实际上链接到一个单独的页面,那么这可以通过CSS实现。一种解决方案是为主体设置一个类,以正确设置活动导航的样式。
HTML
<body class="business">
<ul id="dropmenu">
<li class="nav-home"><a href="#">Home</a></li>
<li class="nav-business"><a href="#">Business</a></li>
</ul>
</body>
相关提示:你能发布你的html输出吗?我猜你实际上必须加载新页面,返回false不是一个选项?如果是这样的话,用javascript所做的更改将不起作用。您需要cookies/本地存储,或者只是在HTML中对其进行编码,或者在服务器端执行逻辑。以下是HTML输出
#dropmenu a {
display:block;
}
#dropmenu a:hover {
border:1px solid #ccc;
}
* active */
.business .nav-business {
border:1px solid #000;
}