菜单导航不使用 Jquery addClass() 改变样式

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;
}