jquery - 事件类菜单 HTML-CSS-JS 不工作

Question

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

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

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

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

如果有人能帮助我，我将不胜感激!

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 定位到 <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);
}

<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="#" accesskey="2" title="Staging">Staging Form</a>          </li>
<li><a href="#" accesskey="4" title="">UAT</a></li>
<li><a href="#" accesskey="8" title="">PILOT</a></li>
<li><a href="#" accesskey="5" title="">PROD</a></li>
<li><a href="#" accesskey="7" title="">Remediation</a></li>
  

<script>
$(document).ready(function(){
$('ul li a').click(function(){
$('ul li').removeClass("current_page_item");
$(this).parent().addClass("current_page_item");
});
});
</script>