jquery - 如何使用这个例子 addClass 和 removeClass

标签 jquery css

这将从 thumbs class addClass active 中删除 active 类,另一个类都是 removeClass active,但我不知道该怎么做。

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

最佳答案

我想,您想在单击的 div 上应用“事件”类并从其他 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

关于jquery - 如何使用这个例子 addClass 和 removeClass,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24077768/

相关文章:

CSS:父div在其内部调整大小时不调整

javascript - 使用 jquery 重新定位 html 中的元素

javascript - 如何在php中屏蔽javascript字符串

javascript - 一旦在用户浏览器中禁用箭头键滚动,如何启用它

jQuery onkeyup 方法未定义

html - 两个按钮和文本具有不同的对齐方式

javascript - 从数组中排除值后获取下一个最高日期值

html - 使用 CSS3 检查方 block 的匹配游戏

javascript - 固定标题位置错误

javascript - 在 javascript 中打印页面时显示文本框