0

ここで私が間違っていることを誰かに教えてもらえますか。クリックしたときに正しいものがアクティブになるように、クラス属性をliに削除/追加しようとしています: http://jsfiddle.net/cyberpuunk/D2RLR/2372/

<div class="container">        
          <div class="span8">
              <ul class="nav nav-tabs gallery-nav">
                <li class="active">
                  <a href="#"<strong>All</strong></a>
                </li>
             <li><a href="#"><strong>link1</strong></a></li>
           <li><a href="#"><strong>link2</strong></a></li>
             </ul>
              </div>
   <div class="row">
       <div class="span12">
           <div class="page1">qwer</div>
            <div class="page1">asdf</div>
            <div class="page1">zxcv</div>
       </div>  
    </div>    
</div>


$('.page1:gt(0)').hide();

$('ul.gallery-nav li').click(function(e) {
    e.stopPropagation();
    var liIndex = $(this).index();
    $('.page1').hide().eq(liIndex).show();
    $(this).removeClass("active");
    eq(liIndex).addClass("active");
}); // end click
4

2 に答える 2

2 
$('ul.gallery-nav li').click(function(e) {
    e.stopPropagation();
    $('.page1').hide().eq($(this).index()).show();
    $('ul.gallery-nav li').removeClass("active");
    $(this).addClass("active");
});

フィドル

で構文エラーが発生しました

eq(liIndex).addClass("active");

.eq()はjQueryオブジェクトメソッドであり、単独で実行できる関数ではありません。これは、使用することで修正できます$('ul.gallery-nav li').eq(liIndex).addClass("active");が、それでも論理的な欠陥があります。

$(this).removeClass("active");

ハンドラーをアタッチしているリストアイテムのグループ全体ではなく、クリックされたものを参照するため、クラスのadd代わりに参照することになっています。そうは言っても、コードの修正バージョンは次のとおりです。removethisli

    $('ul.gallery-nav li').removeClass("active");
    $(this).addClass("active");
//as $(this) references the clicked li, you don't need $('ul.gallery-nav li').eq(liIndex)
于 2012-10-06T17:43:25.990 に答える
2

コーディングしている奇妙な理由で、最初にjQueryオブジェクトを作成してから、メソッド$(this).removeClass('active')を呼び出す必要があることに注意してください。次のことを試してください。eq

$('ul.gallery-nav li').click(function(e){
     e.stopPropagation();
     var liIndex = $(this).index();
     $('.page1').hide().eq(liIndex).show();
     $(this).addClass("active").siblings().removeClass('active')
});

http://jsfiddle.net/54Xdr/

于 2012-10-06T17:43:34.787 に答える