Hide or Show if Current, jQuery -
i have list:
<ul class="pagination"> <li class="dl-nav-1 current"><a href="#">spring training 2001</a><span class="visible"><img src="img/indicator.png" alt="" /></li> <li class="dl-nav-2"><a href="#">nfl 2011</a><span class="hidden"><img src="img/indicator.png" alt="" /></span></li> <li class="dl-nav-3"><a href="#">fantasy baseball</a><span class="hidden"><img src="img/indicator.png" alt="" /></span></li> </ul>
i need show <span>
when li class current, , hide <span>
when not current.
there js plugin change li class, when changes current, make <span>
visible , when removes current, hide <span>
terrible attempt:
$(function) () { if($(ul.pagination li).hasclass("current")) { $("ul.pagination li.current span").removeclass("visible").addclass("hidden"); } else{ $("ul.pagination li.current span").removeclass("hidden").addclass("visible") } };
you need javascript toggling of classes, css can rest:
ul.pagination li.current span { display:inline; } ul.pagination li span { display:none; }
then, using justin808's example, you'd javascript:
function toggleindicator(liclass) { $('.'+liclass).toggleclass('current'); } $('#clickme').click(function() { toggleindicator('dl-nav-3');});
forking justin808's jsfiddle, this: http://jsfiddle.net/uwtez/1/
Comments
Post a Comment