单击后活动的导航栏项目不保持活动状态

Question

我有以下导航栏：

<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 的内置 active 类，但结果相同（删除 ul 声明可以解决问题，但会破坏我的风格）。

谁能告诉我这里发生了什么，或者可能是什么原因造成的？

看起来是因为页面在更改类之后重定向到链接，selectednav 类重置为原来的样子。

Answer 1

你的好像没问题。

$(this).addClass("selectednav");
$(this).siblings().removeClass("selectednav");

这些对我来说很好用。

还有另一种方法可以完成此任务。我准备了一个小小提琴。

这里是a link。在这里，我从所有 li 中删除 current-item 类，然后将其应用于当前元素。

你可以看一下，然后你会更好地理解它。

希望对您有所帮助。

Answer 2

我认为这会有所帮助！

<script>
    $(document).ready(function() {
        $("nav li a").click(function(){
            $(this).addClass("selectednav");
            $(this).siblings().removeClass("selectednav");
        });
    });
</script>

Answer 3

只需替换此代码，只需将类从“selectednav”更改为“active”：

$(document).ready(function() {
        $("li").click(function(){
            $(this).addClass("active");
            $(this).siblings().removeClass("active");

        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>