Question

我有一个导航栏，我希望它可以动态运行。当我尝试激活导航栏中的另一个菜单时，可以更改活动菜单的jquery代码有效，但是其样式不适用于新选择的菜单。有人可以看看我的代码吗？也许我可能会错过代码中的内容或其他内容。

                  <!--HTML-->
                 <div class = "side-nav-bar content">
                            <a class="active-menu" href="javascript:;">체육학</a><i class="arrow right"></i>
                            <a href="javascript:;">전공소개</a>
                            <a href="javascript:;">졸업 후 진로</a>
                            <a href="javascript:;">교육 프로그램</a>
                            <a href="javascript:;">교수소개</a>
                    </div>

                     <!--css-->
                    .side-nav-bar .active-menu {
                    background-color: #293c4e;
                     color: #ffffff;
                      }

                       .active {
                        background-color: #293c4e
                                color: #ffffff;
                       }

                     <!--jquery-->
                   $('.side-nav-bar a').click(function(){
            $(this).addClass('active');
            $('.side-nav-bar 
                                 a').not(this).removeClass('active');
        });

                 <!-- jquery is a code snippet only.-->

Answer 1

您的jQuery添加和删除类工作正常。您的CSS中只有一个简单的错误，活动类中的两个属性之间没有分号

$(document).ready(function() {
  $('.side-nav-bar a').click(function() {
    $(this).addClass('active');
    $('.side-nav-bar a ').not(this).removeClass('active ');
  });

});

.side-nav-bar .active-menu {
  background-color: #293c4e;
  color: #ffffff;
}

.active {
  background-color: #293c4e;
  color: #ffffff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="side-nav-bar content">
  <a class="active-menu" href="javascript:;">체육학</a><i class="arrow right"></i>
  <a href="javascript:;">전공소개</a>
  <a href="javascript:;">졸업 후 진로</a>
  <a href="javascript:;">교육 프로그램</a>
  <a href="javascript:;">교수소개</a>
</div>

Answer 2

您输入了错误的背景颜色，然后使用分号，您将需要输入此样式代码

.active {
background-color: #293c4e;
color: #ffffff;
}

菜单导航不会使用Jquery addClass（）

2 个答案: