Emulating a toggle button with JQuery and CSS -


i have number of elements same class this:

<html> <head><title>example</title> <script type="text/javascript" src="jquery.js"> </head> <body> <ul>   <li class="togglebutton">elem1</li>   <li class="togglebutton">elem2</li>   <li class="togglebutton selected">elem3</li>   <li class="togglebutton">elem4</li> </ul> $(document).ready(function(){  }); </body> </html> 

the selected element has different color other elements. when user clicks on element, want element have selected class - , other elements should no longer have selected class. in other words, 1 element can selected @ time.

i think have worked out logic, not sure how implement using jquery.

basically approach be:

(when item selected):

  1. select items using selector "ul > li.togglebutton"
  2. remove class 'selected' of items fetched in step 1
  3. add class 'selected' current element clicked on.

is logic correct, or there better way of going it?

also, how may implement above logic (assuming there no better alternative), using jquery?

$("ul li.togglebutton").click(function() {      $("ul li.togglebutton").removeclass("selected");      $(this).addclass("selected"); }); 

edit: jsfiddle: http://jsfiddle.net/xfn4s/


Comments

Popular posts from this blog

java - SNMP4J General Variable Binding Error -

windows - Python Service Installation - "Could not find PythonClass entry" -

Determine if a XmlNode is empty or null in C#? -