导航栏有问题。我希望在用户浏览不同页面时更改激活选项卡。
我使用的是基本模板,所以我不想为每个页面重现导航栏 html/css,所以我相信 javascript 是我这里问题的答案。
我尝试使用另一个问题中的一些 Jquery,不幸的是它产生了一个单独的问题,我对 Jquery 不是很精通,所以我发现很难解决这个问题。
这是HTML
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="{% static 'images/sidespacer.png' %}"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"><a class="nav-link" href="/Spaces">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/Spaces/space">Spaces</a></li>
<li class="nav-item"><a class="nav-link" href="/Spaces/pricing">Prices</a></li>
<li class="nav-item"><a class="nav-link" href="/Spaces/howitworks">How it Works</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
{% if user.is_authenticated %}
<li class="nav-item"><a class="nav-link" href="{% url 'logout' %}">Log out
{{user.username}}</a></li>
{% else %}
<li class="nav-item"><a class="nav-link" href="{% url 'signup' %}">Sign Up</a></li>
<li class="nav-item"><a class="nav-link" href="{% url 'login' %}">Login</a></li>
{% endif %}
</ul>
</div>
</div>
</nav>
这是当前的Jquery
$(document).ready(function() {
$( ".nav-item" ).bind( "click", function(event) {
event.preventDefault();
var clickedItem = $( this );
$( ".nav-item" ).each( function() {
$( this ).removeClass( "active" );
});
clickedItem.addClass( "active" );
});
});
Jquery 允许激活状态改变但阻止用户被定向到链接。
提前致谢
最佳答案
试试这个
$(document).ready(function() {
const linkLi = $( ".nav-item" );
const linkAnchor = $( ".nav-item a" ); // anchor is require to prevent for not to direct
linkAnchor.bind( "click", function(event) {
var clickedItem = $( this ).parent("li:first");
linkLi.each( function() {
$( this ).removeClass( "active" );
});
clickedItem.addClass( "active" );
});
$( ".nav-item a[href$='"+window.location.pathname+"']" ).parent("li:first").addClass("active");
});
看到这个(fiddle)
关于javascript - 单击另一个页面时 Navbar Active 不会改变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53954361/