Geek Answers Handbook

Change the color of one list item

Is there a way in HTML / CSS to change the color of only one element of the list, not all? I just want to change the color of each of them so that the user knows which page it is on. so far I have managed to do only a:hover , but I can’t understand how I can do this so that the color remains.

HTML:

 <div id="nav"> <div class="wrapper"> <ul id="buttons"> <li><a href="index.html">| About</a></li> <li><a href="html/gallery.html">| Gallery</a></li> <li><a href="html/prices.html">| Prices</a></li> <li><a href="html/faq.html">| FAQ</a></li> <li><a href="html/contact_us.html">| Contact Us</a></li> <div class="clear"></div> </ul> </div> </div>

CSS

 #buttons { background-color: black; } .clear { clear: both; } #buttons li a { position:block; color:#fff; padding:1em; text-decoration:none; float:left; width:95px; } #buttons li a:hover { background-color:#bc1b32; }
+4
source share
4 answers

The easiest way is to simply create a class, say, highlight it, add it to the tag that you want to change, and that it:

 .selected { background-color: green; }

then your link will be as follows:

 <li><a class='selected' href="index.html">| About</a></li>
+1
source

Take a look: http://jsfiddle.net/qzXgJ/

More details:

HTML

 <div> <div class="wrapper"> <ul> <li><a id="index" href="#">| About</a></li> <li><a id="gallery" href="#">| Gallery</a></li> <li><a id="prices" href="#">| Prices</a></li> <li><a id="faq" href="#">| FAQ</a></li> <li><a id="contact_us" href="#">| Contact Us</a></li> <div class="clear"></div> </ul> </div> </div>​​​

Js

 $(".wrapper li a").click(function () { $('.wrapper li a').each(function() { $(this).removeClass('selected'); }); $(this).addClass('selected'); $(".wrapper ul li a").click(function () { $('.wrapper ul li a').each(function() { $(this).removeClass('selected'); }); $(this).addClass('selected'); console.log($(this).attr('id')); /* Get html by jQuery */ $.get($(this).attr('id'),function(data){ $('#result').html(data); }); return false; });

CSS

 .selected { background-color:#b51ba2; }
+3
source

I used this answer for the same question with good results: http://hicksdesign.co.uk/journal/highlighting-current-page-with-css

0
source

The question is a little vague; to indicate which page the user is on, you can add a class to this specific list item that contains the link they last clicked:

 <li class="current"> <a href="html/prices.html">| Prices</a> </li>

Then you provide specific styles for this:

 li.current { background-color: #f1f1f1; }
-1
source

More articles:


All Articles