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

只需更换此代码，只需更改＆＃34; selectednav＆＃34;到＆＃34;活跃＆＃34;：

＆＃13;

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

＆＃13;

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

＆＃13;

单击

3 个答案: