Question

我不确定我做错了什么。一旦我从菜单的一个选项切换到另一个选项，我希望菜单的颜色改变颜色。这就是我所拥有的：

＆＃13;

    $(document).ready(function() {
      $('ul li a').click(function() {
        $('li a').removeClass("#menu .current_page_item a");
        $(this).addClass("#menu .current_page_item a");
      });
    });

＆＃13;

#menu li:hover a,
#menu li.active a,
#menu li.active span {
  background: #2980b9;
  color: rgba(255, 255, 255, 1);
}
#menu .current_page_item a {
  background: #2980b9;
  color: rgba(255, 255, 255, 1);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
  <ul>
    <li class="current_page_item"><a href="index.html" accesskey="1" title="">Homepage</a>
    </li>
    <li><a href="staging.html" accesskey="2" title="Staging">Staging Form</a>
    </li>
    <li><a href="UAT.html" accesskey="4" title="">UAT</a>
    </li>
    <li><a href="PILOT.html" accesskey="8" title="">PILOT</a>
    </li>
    <li><a href="#" accesskey="5" title="">PROD</a>
    </li>
    <li><a href="#" accesskey="7" title="">Remediation</a>
    </li>
  </ul>
</div>

＆＃13;

感谢有人可以帮助我！

Answer 1

我在您的代码中发现了2个问题：

1）RemoveClass和Addclass不应包含特殊字符。它不是css选择器。它只能传递给它的类值。在您的代码中，您输入了ID，并在类名之前添加了点。将$('li a').removeClass("#menu .current_page_item a");替换为removeClass("current_page_item")

2）当您点击时，它是被点击的<a>，而不是<li>，因此您必须放置parent()才能将addClass定位到{{1} }}

以下是您使用代码段的完整代码：

<li>

#menu li:hover a, #menu li.active a, #menu li.active span
{
    background: #2980b9;
    color: rgba(255,255,255,1);
}    

#menu .current_page_item a
{
    background: #2980b9;
    color: rgba(255,255,255,1);
}

Answer 2

JavaScript存在一些问题。

首先，您的班级位于“li”标签上，而不是“a”标签。因此，我们必须添加和删除这些标记。

其次，removeClass和addClass函数只接受类名，而不是完整路径。

修复这些问题后，您的代码应该运行得很好！

更改后的JavaScript：

$(document).ready(function(){
   $('ul li').click(function(){
      $('li').removeClass("current_page_item");
      $(this).addClass("current_page_item");
   });
});

JSFIDDLE EXAMPLE

活动类菜单HTML-CSS-JS不起作用

2 个答案: