0

新しいプロジェクトに取り組んでいますが、HTMLでタブヘッダーとコンテンツを同じコンテナー内に含めることができません。したがって、Jqueryとそのn番目の子セレクターを使用して、各タブを有効または無効にしました。jsfiddlehttp : //jsfiddle.net/QdbdT/1/に例をまとめました。

これはJavaScriptです

$(".control-bar-nav-wrapper ul li:nth-child(1)").on("click", function() {
    $(this).addClass("active").siblings().removeClass("active");
    $(".slider-wrapper-container > div:nth-child(1)").addClass("active").siblings().removeClass("active");
});
$(".control-bar-nav-wrapper ul li:nth-child(2)").on("click", function() {
    $(this).addClass("active").siblings().removeClass("active");
    $(".slider-wrapper-container > div:nth-child(2)").addClass("active").siblings().removeClass("active");
});
$(".control-bar-nav-wrapper ul li:nth-child(3)").on("click", function() {
    $(this).addClass("active").siblings().removeClass("active");
    $(".slider-wrapper-container > div:nth-child(3)").addClass("active").siblings().removeClass("active");
});
$(".control-bar-nav-wrapper ul li:nth-child(4)").on("click", function() {
    $(this).addClass("active").siblings().removeClass("active");
    $(".slider-wrapper-container > div:nth-child(4)").addClass("active").siblings().removeClass("active");
});

これは機能しますが、もっと効率的なコーディング方法があるのではないかと思います。ある種の索引付けが役立つかもしれないと思いましたが、頭を悩ませることはできませんでした。誰かアイデアがあれば、よろしくお願いします。

4

2 に答える 2

4

例で .index ()と.eq()を使用して、同じ効果を達成し、すべての関数を組み合わせることができます

$(".control-bar-nav-wrapper ul li").on("click", function() {
    $(this).addClass("active").siblings().removeClass("active");
    $(".slider-wrapper-container > div").eq($(this).index()).addClass("active").siblings().removeClass("active");
});

フィドル

于 2013-01-03T17:01:09.917 に答える
0

data attributeを使用して、クリックした要素とコンテナ要素の間をマッピングできるようにすることを検討してください。最も洗練されているようには見えませんが、読みやすさの面では役立ちます。

CSS

<li class="applications active" data-display='Applications'>
       <a href="#">Applications</a>
</li>
<li class="communities" data-display='Communities'>
       <a href="#">Communities</a>
</li>
<li class="friends" data-display='Friends'>
       <a href="#">Friends</a>
</li>
<li class="administration" data-display='Administration'>
        <a href="#">Administration</a>
</li>

jQuery

$('[data-display]').on('click',function()
{
      $('.slider-wrapper').removeClass('active');
      $('#' + $(this).attr('data-display')).addClass('active');                              
});​

例

于 2013-01-03T17:01:57.197 に答える