addclass - jquery add numeric class to an element based on current class of another element -
i have following html
<ul id="tabs"> <li>1</li> <li>2</li> <li>etc...</li> </ul>
and following jquery function using append "buttons" traversing "up" or "down" list, while "showing" current item:
$('#tabs li').first().attr('class', 'current'); $('#tabs li').each(function(i) { = + 1; $(this).attr('id', 'tab-' + i); if(i !== $('#tabs li').size()) { $(this).append('<a class="tabpagination next floor-up" rel="tab-' + (i + 1) + '" href="/keyplate/' + (i + 1) + '">up</a>'); } if(i !== 1) { $(this).append('<a class="tabpagination next floor-down" rel="tab-' + (i - 1) + '" href="/keyplate/' + (i - 1) + '">down</a>'); } }); $('#tabs li[class!="current"]').hide(); $(document).on("click", "a.tabpagination", function(){ $('.current').removeattr('class'); $('#tabs li[class!="current"]').hide(); $('#' + $(this).attr('rel')).show(); });
i have div:
<div id="tower"></div>
what need add class #tower div, based on selected #tab item. example if on #tab li = 2, #tower div class="active_level_2". in other words, take value of 'current' #tab list item , use create "active_level_#".
thanks in advance!
you can attribute rel
, split last number use active_level_
class. can pull $(this)
variable since being used more once.
$(document).on("click", "a.tabpagination", function(){ var tab = $(this); $('.current').removeattr('class'); $('#tabs li[class!="current"]').hide(); $('#' + tab.attr('rel')).show(); (var = 1; <= 6; i++) $('#tower').removeclass('active-level-' + i); $('#tower').addclass('active_level_' + tab.attr('rel').split('-')[1]); });
tab.attr('rel').split('-')[1]
tab's rel
attribute, split string 2 @ -
character using split()
, second part return number want.
Comments
Post a Comment