jquery current menu item changing color issue

Question

Default a:link and a:visited background-color is transparent and color black. Then a:hover is specified with background to be black and color to be white. This works well.

Here is the problem: I inserted jquery script which performs a background and color change, in my case to set the background black and color to be white - same as the a:hover. This script is performing the wanted action but the color of the text stays black. Any help?

Here are the codes:

<ul id="subnav">
    <li><a href="http://127.0.0.1:4001/wbdemo/pages/abc.php" class=”red” onclick=”selected(this)”><h99>Home<h99/></a></li>
    <li><a href="http://127.0.0.1:4001/wbdemo/pages/asd.php"><h99>Home</h99></a></li>
    <li><a href="http://127.0.0.1:4001/wbdemo/pages/rtz.php"><h99>Home</h99/></a></li> 
    <li><a href="#"><h99>Home</h99/></a></li> 
    <li><a href="#"><h99>Home</h99/></a></li>
</ul> 

<script type="text/javascript">
$(document).ready(function(){
    $('#subnav a').each(function(index) {
        if(this.href.trim() == window.location)
            $(this).addClass("selected");
    });
});
</script>

ul
{ list-style-type: none;
  margin:0;
  padding:0;
  overflow: hidden;
}

ul a:link, ul a:visited
{ display: block;
  width: 240px;
  background-color: tranparent;
  text-align: right;
  text-transform: uppercase;
  text-decoration: none;
  height: 40px;
  color: #000000
}

ul a:hover, .selected
{ background-color: #000000;
  color: #ffffff
}

hasan · Accepted Answer · 2017-06-08 13:13:13Z

2

Split last css class into two:

ul a:hover
{ 
  background-color: #000000;
  color: #ffffff;
}

.selected
{ 
  background-color: #000000;
  color: #ffffff !important;
}

Or, simpler, just have the !important added to the last line:

ul a:hover, .selected
{ 
  background-color: #000000;
  color: #ffffff !important;
}

edited Jun 8, 2017 at 13:13

hasan

3,5121 gold badge18 silver badges23 bronze badges

answered Aug 10, 2012 at 21:31

Vlad

2,53022 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matti Over a year ago

Thanks! Works as it should! :)

Spudley · Accepted Answer · 2012-08-10 21:40:31Z

0

try with

$(this).css('color','coloryouwant')

edited Aug 10, 2012 at 21:40

Spudley

169k39 gold badges240 silver badges309 bronze badges

answered Aug 10, 2012 at 21:23

ALEX ORTIZ

1891 silver badge7 bronze badges

1 Comment

Matti Over a year ago

With this one every menu item got white not just the selected.

Collectives™ on Stack Overflow

jquery current menu item changing color issue

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related