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)複数回使用されているため、変数をプルすることもできます。

jsフィドル

$(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する文字で文字列を 2 つに分割し、2 番目の部分を取得して必要な数値を返します。-split()

于 2013-04-05T06:06:44.613 に答える