我有以下导航栏：
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to 'Home', welcome_index_path %></li>
<li><%= link_to 'Projects', projects_path %> </li>
<li><%= link_to 'Users', users_path %> </li>
</ul>
</div>
</nav>
然后这个jquery根据点击更改选定的项目，其中.selectednav具有background-color: black：
<script>
$(document).ready(function() {
$("li").click(function(){
$(this).addClass("selectednav");
$(this).siblings().removeClass("selectednav");
});
});
</script>
但是，在单击导航栏项目后，.selectednav该类仅在消失之前暂时应用于该元素。
我发现解决此问题的唯一方法是从HTML中删除以下行：
<ul class="nav navbar-nav navbar-right">
但这当然会破坏我的样式，而我希望在这里使其与其余的bootstrap框架相适应。
我也尝试过使用Bootstrap的内置active类，但结果相同（删除ul声明可解决问题，但会破坏我的风格）。
谁能告诉我这是怎么回事，或可能是什么原因造成的？
看起来是因为在更改类后页面正在重定向到链接，所以selectednav该类将重置为原来的状态。
您的似乎没有问题。
$(this).addClass("selectednav");
$(this).siblings().removeClass("selectednav");
这些对我来说很好。
还有另一种方法可以完成此任务。我准备了一个小提琴。
这是一个链接。在这里，我要从所有li中删除current-item类，然后将其应用于当前元素。
您可以看一下，然后您会更好地理解它。
希望能有所帮助。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句