javascript Jquery 添加类并在页面重新加载时保留
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27877068/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery add class and keep when page reload
提问by anhelo
I have a simple navigation menu. Home link has a dropdown active class. I need to do this: When user press for example Article link, jquery has to remove dropdown active class from Home and set this class to selected link. I know that I can use removeClass and addClass , but I need to keep selected link class when page is reload. I heard about cookies and localstorage to set class, but I don't know how. Can someone help me?
我有一个简单的导航菜单。主页链接有一个下拉活动类。我需要这样做：当用户按下例如文章链接时，jquery 必须从主页中删除下拉活动类并将此类设置为选定的链接。我知道我可以使用 removeClass 和 addClass ，但我需要在页面重新加载时保留选定的链接类。我听说过 cookie 和 localstorage 来设置类，但我不知道如何。有人能帮我吗？
<ul>
<li class="dropdown active"><a>Home</a></li>
<li class="dropdown"><a>Articles</a></li>
<li class="dropdown"><a>About</a></li>
</ul>
回答by Ahosan Karim Asik
You can use with jquery in this way:
您可以通过这种方式与 jquery 一起使用：
$(document).ready(function(){
if($(".dropdown a").attr("href")==window.location.href){
$(".dropdown").attr("class","dropdown active");
}
else{
$(".dropdown").attr("class","dropdown");
}
});
回答by varun kumar
Just check once for any err,this should resolve your issue.
只需检查一次是否有任何错误，这应该可以解决您的问题。
<ul class="nav">
<li class="dropdown active"><a>Home</a></li>
<li class="dropdown"><a>Articles</a></li>
<li class="dropdown"><a>About</a></li>
</ul>
$('.nav li').click(function(){
$('.navt li').removeClass('active');
$(this).addClass('active');
});
or using cookie(ideally not very good option)
或使用 cookie（理想情况下不是很好的选择）
set_page.php
设置页面.php
setcookie('nav', 'put-the-li-classname-here', time(),'/');
setcookie('nav', 'put-the-li-classname-here', time(),'/');
receive_page.php
接收页面.php
$getnav = $_COOKIE['nav'];
$getnav = $_COOKIE['nav'];
js
js
var variable1 = // get the php val here;
$(document).ready(function(){ $('.navt li').removeClass('active'); $('.'+variable1).addClass('active');});
var variable1 = // 在这里获取 php val;
$(document).ready(function(){ $('.navt li').removeClass('active'); $('.'+variable1).addClass('active');});
回答by Adriano Monecchi
I'm able to get this working on a simple HTML website.
我可以在一个简单的 HTML 网站上使用它。
The function bellow will check the page URL that the user or visitor is viewing, and compare with the one on the menu item. If they match, it'll add the .activeclass to that menu item.
下面的函数将检查用户或访问者正在查看的页面 URL，并与菜单项上的 URL 进行比较。如果它们匹配，它会将.active类添加到该菜单项。
Considering your own HTML structure, try the following:
考虑到您自己的 HTML 结构，请尝试以下操作：
// Navigation Markup, let's add an id for easy targeting.
<ul id="nav">
<li class="dropdown"><a>Home</a></li>
<li class="dropdown"><a>Articles</a></li>
<li class="dropdown"><a>About</a></li>
</ul>
// The JS
jQuery(function() {
var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/")+1);
jQuery("#nav ul li a").each(function(){
if(jQuery(this).attr("href") == pgurl || jQuery(this).attr("href") == '' )
jQuery(this).addClass("active");
})
});
Note: The function targets the <a>elements within the <ul>list. In order to target the <li>element, slightly change the function.
注意：该函数<a>以<ul>列表中的元素为目标。为了定位<li>元素，稍微改变函数。
回答by Alexey
what worked for me:
什么对我有用：
<nav class="nav">
<a class="nav-link" href="/">Блог</a>
<a class="nav-link" href="/loler">Об авторе</a>
</nav>
$(document).ready(function() {
const regex = /http:\/\/.*\/(.*)\//g;
const match = regex.exec(window.location.href);
// iterate over all and find match
if (match) {
$(".nav-link").each(function() {
if ($(this).attr("href").slice(1) == match[1]) {
$(this).addClass("active");
}
});
}
// set active first element
else {
$(".nav-link:first").addClass("active");
}
});
回答by Abdelhakim Ezzahraoui
The Answer>>> add this code directly in your file.jsin above
答案>>> 将此代码直接添加到上面的file.js中
var url = window.location.href;
var tg = url.split('/');
jQuery('.navbar-light .navbar-nav .nav-link').each(function(){
url_this = jQuery(this).attr("href");
var ts = url_this.split('/');
if(decodeURIComponent(tg[tg.length -2]) === decodeURIComponent(ts[ts.length -1]) ){
jQuery(this).addClass('active');
return false;
}else{
if(decodeURIComponent(tg[tg.length -2]) === decodeURIComponent(ts[ts.length -2]) ){
jQuery(this).addClass('active');
return false;
}
}
});
回答by Wanderer
This should help. Add .eachtoo @Ahosan Karim Asik solution.
这应该有帮助。添加.each太@Ahosan Karim Asik 解决方案。
$(document).ready(function(){
$(".dropdown a").each(function(){
if($(".dropdown a").attr("href")==window.location.href){
$(".dropdown").attr("class","dropdown active");
}
else{
$(".dropdown").attr("class","dropdown");
}
});
});
