ripepe ripepe - 1 month ago 8
jQuery Question

Active class menu HTML-CSS-JS dont work

I'm not sure what am I doing wrong. I want the color of the menu change the color once I switch from one option of the menu to another. This is what I have:



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





Appreciated if someone can help me!

TSR TSR
Answer

I spotted 2 problems in your code:

1) RemoveClass and Addclass should not contain special character. It is not the css selector. It's only class value that you can pass in it. In your code, you put the id and you added the dot before the class name. Replace: $('li a').removeClass("#menu .current_page_item a"); with removeClass("current_page_item")

2)When you click, it's the <a> that is being clicked, not the <li>, so you have to put parent() in order to target the addClass to the <li>

Here is you complete code with snippet:

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