如何使用此示例addClass和removeClass

时间:2014-06-06 08:50:16

标签: jquery css

这会从活跃的拇指班addClass中移除活动班级,而另一个班级都是removeClass活跃的,但我不知道该怎么做。

    $(document).ready(function(){
         $(".thumbgallery .thumb a").click(function(e) {
        $(this).parent().addClass("active");
        $(this).parent().removeClass("active");

        var href = $(this).attr("href");
        $(".largethumb img").attr("src",href);
        e.preventDefault();
        return false;
      });
    });

      //html

<div class="largethumb">
         <img src="images/detail/ref.jpg"/>
         <a class="left" href="#"> <i class="icon-chevron-left"></i></a>
        <a class="right" href="#"> <i class="icon-chevron-right"></i></a> 
 </div> <!-- End largeImage -->

  <div class="thumbgallery clearfix">
     <div class="thumb active"><a href="images/detail/ref.jpg"><img src="images/detail/ref.jpg"/></a></div>
    <div class="thumb"><a href="images/detail/car2.jpg"><img src="images/detail/car2.jpg"/></a></div>
    <div class="thumb"><a href="images/detail/car3.jpg"><img src="images/detail/car3.jpg"/></a></div>
    <div class="thumb"><a href="images/detail/car4.jpg"><img src="images/detail/car4.jpg"/></a></div>
    <div class="thumb"><a href="images/detail/car5.jpg"><img src="images/detail/car5.jpg"/></a></div>
    <div class="thumb"><a href="images/detail/car6.jpg"><img src="images/detail/car6.jpg"/></a></div>                       
    <div class="thumb"><a href="images/detail/car1.jpg"><img src="images/detail/car1.jpg"/></a></div>
     <div class="thumb"><a href="images/detail/car6.jpg"><img src="images/detail/car6.jpg"/></a></div>          
   </div>

3 个答案:

答案 0 :(得分:1)

使用

$(this).parent().addClass('active');
$(this).parent().removeClass('active');

您添加active类并在同一时间将其删除,因此无效。试试:

$(this).parents('.thumb').addClass('active').siblings().removeClass('active');

demo

答案 1 :(得分:1)

试试这个

 $(".thumbgallery .thumb a").click(function(e) {
         $(".thumb").removeClass("active");
        $(this).parent().addClass("active");
}

如果你不想要选择父母的活跃课程。你必须这样做

$(".thumbgallery .thumb a").click(function(e) {
             $(".thumb").addClass("active");
            $(this).parent().removeClass("active");
    }

答案 2 :(得分:1)

我认为,你想要申请“活跃”。点击div上的类并从其他人中移除?

如果是,那么你应该使用:

$(".thumbgallery .thumb a").click(function(e) {
      $('.thumb').removeClass("active");  //-- Remove "active" from all elements with "thumb" class     
      $(this).parent().addClass("active"); //-- Add class on clicked anchor tag's parent element
      var href = $(this).attr("href");
      $(".largethumb img").attr("src",href);
      e.preventDefault();
      return false;
}); 

Working Example