How do I retain a class after a link is clicked - for pseudo checkboxes.
I'm creating a list of items which visually look like checkboxes. They will work similar to the ones used on eBay that allow you to select only new/used items. Mine are a little simpler though. Here is the markup:
- <li>
<a href="#" class="catHeader trigger">Designers</a>
<ul class="nav-ul toggle_comtainer">
<li><a href="index.html" id="d1" class="select">Stills</a></li>
And I've written a little jQuery to add a class of 'selected' to the item when they are clicked:
- $(document).ready(function(){
//Switch the state of the list by adding 'selected' class
$(".select").click(function(){
$(this).toggleClass("selected");
});
});
The CSS simply moves a background sprite that shows a checkbox either ticked or not depending on the 'selected' class.
However, my question is, I'd like the class of the item to STAY selected if the <a> tag is clicked. However, as it is loading another page (it will eventually call some products from a DB but linked to same page for now to test) it is currently 'resetting' to its un-selected state (e.g. the extra 'selected' class is no longer applied.
How can I retain the 'selected' class on the element when it's parent <a> tag is clicked?