我有一个导航栏,其中包含由foreach循环从数据库加载的链接,导航栏是静态的,因此只有内容在变化。我想在页面加载活动时向链接添加“活动”类。
我试图在单击li
元素时添加类,但在重新加载页面时类会消失。
这是我的HTML(由PHP foreach循环呈现,因此它看起来并不是硬编码的)
<div class="sidebar-menu">
<ul class="sidebar-nav">
<li class="icon_links">
<a href="/home" class="links">
<div class="icon">
<i class="fa fa-tasks" aria-hidden="true"></i>
</div>
<div class="title">Dashboard</div>
</a>
</li>
<li class="icon_links">
<a href="/messaging" class="links">
<div class="icon">
<i class="fa fa-comments" aria-hidden="true"></i>
</div>
<div class="title">Messaging</div>
</a>
</li>
</ul>
</div>
的JavaScript
$(document).ready(function() {
var selector = '.sidebar-nav li';
$(selector).on('click', function() {
$(selector).removeClass('active');
$(this).addClass('active');
});
});
答案 0 :(得分:6)
你需要做这样的事情:
var selector = '.sidebar-nav li';
var url = window.location.href;
var target = url.split('/');
$(selector).each(function(){
if($(this).find('a').attr('href')===('/'+target[target.length-1])){
$(selector).removeClass('active');
$(this).removeClass('active').addClass('active');
}
});
我希望它有所帮助
答案 1 :(得分:0)
下面的函数将类激活添加到指向您当前页面的所有链接。
$(function(){
$("a").each(function(){
if ($(this).attr("href") == window.location.pathname){
$(this).addClass("active");
}
});
});
来源https://css-tricks.com/snippets/jquery/highlight-all-links-to-current-page/
答案 2 :(得分:0)
根据我从您的上下文中理解的内容,您尝试在重新加载页面时动态地将类设置为dom元素?
问题在于,当使用直接链接/表单(具有正常行为)时,您将重新加载当前页面(或移动到新页面),这将取消您的当前修改并使页面恢复原状。
我认为你应该:
在您的网页中使用iframe
,这将是您重新加载的网页的唯一部分。
或者使用ajax
,您将包含当前页面内容的部分替换为新页面的内容
答案 3 :(得分:0)
你可以使用 $(选择器).toggleClass(&#39;有源&#39); $(本).addClass(&#39;有源&#39);
答案 4 :(得分:0)
我使用简单的方法
<script>
var header = document.getElementById("ActiveId");
var btn = header.getElementsByClassName("btn");
for (var i = 0; i < btn.length; i++) {
btn[i].addEventListener("click", function () {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
我希望这会对某人有所帮助
答案 5 :(得分:0)
//将此代码直接添加到您的js文件中的第0行
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;
}
}
});