Question

有人可以告诉我这里我做错了什么。尝试删除/添加类属性为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

Answer 1

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

Fiddle

时出现语法错误

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

.eq()是一个jQuery对象方法，而不是你自己可以使用的函数。这可以通过使用$('ul.gallery-nav li').eq(liIndex).addClass("active");来解决，但仍然存在逻辑缺陷：

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

你应该add而不是remove这个类，因为this引用了点击的li而不是你附加的整个列表项组处理程序。话虽如此，您的代码的固定版本是：

    $('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)

Answer 2

由于奇怪的原因，您正在编写$(this).removeClass('active')，请注意您应首先创建一个jQuery对象，然后调用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/

试图操纵类属性

2 个答案: