Get Current Page/url In Attribute Selector

I am trying to style some text menu in my css, when the link of that menu equals the current url. But doesn't seem to work. This is the sentence: #pages.tabs ul li a[href$=location

Solution 1:

Only use addClass or removeClass from JQuery.

Css code:

.liactive{background-color:#3C6EC9;}

---

Jquery code:

$(document).ready(function(){

$('ul li').click(function(){
  var items=$('ul li').get();
  for(var i=0;i<items.length;i++)
  $(items[i]).removeClass('liactive');
  $(this).addClass('liactive');
 });

});

---

I made this code for you. Have fun ^^ Here is your example --------> Knee's JSFiddle

Solution 2:

This can not be done with css only you need to use javascript too. Give a class to current url li and give styling from css. like

Html

<divclass="navbar"><ul><ahref="../index.html"><li>Home</li></a><ahref="usefulsites.html"><li>Useful Sites</li></a><ahref="software.html"><liclass="currentpage">Software</li></a><ahref="workbench.html"><li>The Workbench</li></a><ahref="contact.php"><li>Contact</a></li></a></ul></div>

Css

.currentpage {
   color: #640200;
   background-color: #000000;
}