我已经尝试了几次这样的迭代,但似乎无法让我的事件类在 Bootstrap 导航栏(在 Bootstrap 4 中)上发生变化。当我点击一个新的菜单选项时,它开始变为事件类,但立即变回“主页”选项处于事件状态。
这是我的导航栏:
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url 'home' %}">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item btn-group">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Deals
</a>
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
还有我的js代码:
<script>
$(".navbar-nav li").on("click", function(){
$(".navbar-nav li").removeClass("active");
$(this).addClass("active");
});
</script>
最佳答案
您不需要任何自定义 JavaScript。 bootstrap.js 就是您所需要的(连同 jQuery)。
不要试图重新发明轮子。使用已经存在的“轮子”。
以下 3 个文件是您需要加载的(按顺序):
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
您的导航栏还缺少此处文档中描述的其他一些部分:
关于javascript - Bootstrap 菜单更改事件类更改不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49202474/