CODEWITHSUNDEEP
jqueryhtmlcss
ripepe
ripepe

Reputation: 35

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!

Upvotes: 0

Views: 273

Answers (2)

Jacob Morris
Jacob Morris

Reputation: 500

There's a couple things wrong with the JavaScript.

First, your class is on the "li" tags, not the "a" tag. Therefore, we must add and remove from these tags.

Second, The removeClass and addClass functions simply accept the class name, not the full path.

After fixing these issues, your code should run great!

JavaScript after changes:

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

JSFIDDLE EXAMPLE

Upvotes: -1

TSR
TSR

Reputation: 20446

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>

Upvotes: 2

Related Questions