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):
- select items using selector "ul > li.togglebutton"
- remove class 'selected' of items fetched in step 1
- 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
Post a Comment