JQuery ul li select list -
trying use jquery scroll through ul li list using class next , class prev e.g.
<ul class="selectoption"> <li> item 1</li> <li> item 2</li> <li> item 3</li> <li> ... </li> </ul> <a href="" class="next">next</a> <a href="" class="prev">back</a>
only thing want selected li visible. somehow need index li's? appreciated - in advance
this should it:
// hide first $('.selectoption li').not(':first').hide(); // handle click of prev , next links $('.prev, .next').click(function() { // determine direction, -1 prev, 1 next var dir = $(this).hasclass('prev') ? -1 : 1; // li visible var current = $('.selectoption li:visible'); // element should shown next according direction var new_el = dir < 0 ? current.prev('li') : current.next('li'); // if we've reached end, select first/last depending on direction if(new_el.size() == 0) { new_el = $('.selectoption li:'+(dir < 0 ? 'last' : 'first')); } // hide them all.. $('.selectoption li').hide(); // , show new 1 new_el.show(); // prevent link redirecting browser somewhere return false; });
Comments
Post a Comment