2

我有以下 HTML

<ul id="tabs">
    <li>1</li>
    <li>2</li>
    <li>etc...</li>
</ul>

我使用以下 jquery 函数来附加“按钮”以遍历“向上”或“向下”列表，同时仅“显示”当前项目：

$('#tabs li').first().attr('class', 'current');

$('#tabs li').each(function(i) {
    i = 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(); 

});

我有另一个div：

<div id="tower"></div>

我需要做的是根据当前选择的#tab 项向#tower div 添加一个类。因此，例如，如果我们在 #tab li = 2 上，那么 #tower div 将获得 class="active_level_2"。换句话说，获取“当前”#tab 列表项的值并使用它来创建“active_level_#”。

提前致谢！

4

1 回答 1

0

您可以获取属性rel并将其拆分以获取用于active_level_该类的最后一个数字。我们现在也可以拉$(this)入一个变量，因为它被多次使用。

jsFiddle

$(document).on("click", "a.tabPagination", function(){
    var tab = $(this);
    $('.current').removeAttr('class');
    $('#tabs li[class!="current"]').hide();    
    $('#' + tab.attr('rel')).show(); 
    for (var i = 1; i <= 6; i++)
        $('#tower').removeClass('active-level-' + i);
    $('#tower').addClass('active_level_' + tab.attr('rel').split('-')[1]);
});

tab.attr('rel').split('-')[1]将获取选项卡的属性，在字符rel处将字符串分成两部分，并获取第二部分以返回我们想要的数字。-split()

于 2013-04-05T06:06:44.613 回答