的jQuery：需要添加类“活动”

这里是我的代码，的jQuery：需要添加类“活动”

详细信息：我有2个div的，而当我点击（第一环节）80（第一细节）开放。然后我点击（第二个链接）（第二个细节）打开。现在我需要，当我点击（第一链接），所以在第一个链接添加类active，，当我点击（第二链接）和现在（第一链接）活动类删除并添加活动类（第二链接）。当我再次点击（第二个链接），然后主动类删除。

这是我点击的代码。我需要在<a>标记中添加“Active”类。通过jQuery。我如何添加jquery？

Codepen Fiddle

<style> 
    /* product-row */ 
    .product-row{ clear:both; padding:10px 0 20px 0;} 
    .product-row .product-main{ width:225px; float:left; margin:0 60px 25px 0;} 
    .product-row .product-main .product-img{ height:80px; text-align:center; margin:0 auto;} 
    .product-row .product-main .product-title h2 a{ font-family:'Roboto Condensed'; font-size:20px; color:#343434; clear:both; display:block; text-align:center; line-height:42px; position:relative; text-transform:uppercase; margin:10px 0 0 0;} 
    .product-row .product-main .product-title h2 a:hover{ background:url(../images/product-title-hover.png) bottom center no-repeat;} 
    .product-row .product-detail{ clear:both; height:150px; background:#e2ddcf;} 
    .det1, .det2, .det3, .det4, .det5, .det6, .det7, .det8{ display:none;} 
    .product-row .product-detail .product-detail-row{ clear:both; padding:30px 0 0 30px;} 
    .product-row .product-detail .product-detail-row .product-detail-main{ width:540px; float:left;} 
    .product-row .product-detail .product-detail-row .product-detail-main ul{ margin:0; padding:0px; list-style:none;} 
    .product-row .product-detail .product-detail-row .product-detail-main ul li{ font-family:'Tahoma'; font-size:14px; color:#686868; clear:both; padding:0 0 0 25px; background:url(../images/valores-text-bg.png) left 5px no-repeat; line-height:20px; margin:0 0 15px 0; height:25px;} 
</style> 
<div class="product-main"> 
       <div class="product-img"><a href="#"><img src="images/product-img-4.png" alt=""></a></div><!-- .product-img --> 
       <div class="product-title"><h2><a href="#" id="prod1">FUSÕES E AQUISIÇÕES</a></h2></div><!-- .product-title --> 
      </div><!-- .product-main --> 
      <div class="product-main"> 
       <div class="product-img"><a href="#"><img src="images/product-img-3.png" alt=""></a></div><!-- .product-img --> 
       <div class="product-title"><h2><a href="#" id="prod2">FUSÕES E AQUISIÇÕES</a></h2></div><!-- .product-title --> 
      </div><!-- .product-main --> 
      <div class="product-main"> 
       <div class="product-img"><a href="#"><img src="images/product-img-2.png" alt=""></a></div><!-- .product-img --> 
       <div class="product-title"><h2><a href="#" id="prod3">FUSÕES E AQUISIÇÕES</a></h2></div><!-- .product-title --> 
      </div><!-- .product-main --> 
      <div class="product-main"> 
       <div class="product-img"><a href="#"><img src="images/product-img-5.png" alt=""></a></div><!-- .product-img --> 
       <div class="product-title"><h2><a href="#" id="prod4">avaliação de empresas</a></h2></div><!-- .product-title --> 
      </div><!-- .product-main --> 
      <div class="product-detail det1 cf"> 
       <div class="product-detail-row cf"> 
        <div class="product-detail-main"> 
         <ul> 
          <li>1</li> 
          <li>Identificação e abordagem de metas de aquisição adequadas em nível nacional e internacional;</li> 
         </ul> 
        </div><!-- .product-detail-main --> 
        <div class="product-detail-main"> 
         <ul> 
          <li>Prospecção de ofertas que melhor se adaptem aos objetivos estratégicos da<br> empresa;</li> 
          <li>Assessoria no desenvolvimento de um plano personalizado e estratégico de <br>negócios.</li> 
         </ul> 
        </div><!-- .product-detail-main --> 
       </div><!-- .product-detail-row --> 
      </div><!-- .product-detail --> 
      <div class="product-detail det2 cf"> 
       <div class="product-detail-row cf"> 
        <div class="product-detail-main"> 
         <ul> 
          <li>2</li> 
          <li>Identificação e abordagem de metas de aquisição adequadas em nível nacional e internacional;</li> 
         </ul> 
        </div><!-- .product-detail-main --> 
        <div class="product-detail-main"> 
         <ul> 
          <li>Prospecção de ofertas que melhor se adaptem aos objetivos estratégicos da<br> empresa;</li> 
          <li>Assessoria no desenvolvimento de um plano personalizado e estratégico de <br>negócios.</li> 
         </ul> 
        </div><!-- .product-detail-main --> 
       </div><!-- .product-detail-row --> 
      </div><!-- .product-detail --> 
      <div class="product-detail det3 cf"> 
       <div class="product-detail-row cf"> 
        <div class="product-detail-main"> 
         <ul> 
          <li>3</li> 
          <li>Identificação e abordagem de metas de aquisição adequadas em nível nacional e internacional;</li> 
         </ul> 
        </div><!-- .product-detail-main --> 
        <div class="product-detail-main"> 
         <ul> 
          <li>Prospecção de ofertas que melhor se adaptem aos objetivos estratégicos da<br> empresa;</li> 
          <li>Assessoria no desenvolvimento de um plano personalizado e estratégico de <br>negócios.</li> 
         </ul> 
        </div><!-- .product-detail-main --> 
       </div><!-- .product-detail-row --> 
      </div><!-- .product-detail --> 
      <div class="product-detail det4 cf"> 
       <div class="product-detail-row cf"> 
        <div class="product-detail-main"> 
         <ul> 
          <li>4</li> 
          <li>Identificação e abordagem de metas de aquisição adequadas em nível nacional e internacional;</li> 
         </ul> 
        </div><!-- .product-detail-main --> 
        <div class="product-detail-main"> 
         <ul> 
          <li>Prospecção de ofertas que melhor se adaptem aos objetivos estratégicos da<br> empresa;</li> 
          <li>Assessoria no desenvolvimento de um plano personalizado e estratégico de <br>negócios.</li> 
         </ul> 
        </div><!-- .product-detail-main --> 
       </div><!-- .product-detail-row --> 
      </div><!-- .product-detail --> 
<script> 
$(function() { 

    jQuery('a[id^="prod"]').on('click', function (e) { 
    var id = $(this).attr('id').slice(-1); 
    var previs = $('div.product-detail:visible'); 
    $('div.product-detail').hide(); 
    if (previs.is($('.det' + id))) { 
     $('.det' + id).hide() 
    } 
    else 
    { 
     $('.det' + id).show(); 
    } 

    //if (detailedDiv.is(':visible')) detailedDiv.hide(); 
    //else detailedDiv.show(); 
    $(this).toggleClass('active'); 
    e.preventDefault() 
}); 

}); 
</script>

来源

2017-02-15 scriptscale

你什么意思_add“活动”做_？一堂课，你的意思是？ –

你的意思是添加一个div的类'活跃'被附加到一个标签内？提供单击按钮后代码应该如何查看的细节（或示例）。 –

我需要这样（在标签上激活）'FUSÕES E AQUISIÇÕES' – scriptscale

你的指令是有点难以遵循，但我觉得这可能是你以后......

var $prodLinks = $('a[id^="prod"]'); 
$prodLinks.on("click", function() { //On the click of any link 

    $prodLinks.not(this).removeClass("active"); //Remove active from all other links 
    $(this).toggleClass("active"); //Toggle the active class for the clicked link 

});

来源

2017-02-15 15:13:54 Santi

我在哪里可以放这个？ – scriptscale

在你的代码片段底部的$（function（）{...}）;'部分。 – Santi

此代码不是第一次添加课程点击 – scriptscale

-1

只需添加一个事件的onClick您的元素，并执行此代码为：

$('#prod1').addClass('Active');

来源

2017-02-15 14:16:03 Bapt

你的意思是这样的：这是一种丑陋，但也许可以帮助。

$('.product-main .product-title a').on('click', function(){ 

    $(this).addClass('active');   
    $(this).parents('.product-main')      
      .siblings() 
      .children('.product-title').children('h2').children('a') 
      .removeClass('active'); 

});

来源

2017-02-15 14:17:00

不好的建议，你使用unic prod1 id。 – DenimTornado

你是，它不是动态的，但基于这个问题，它看起来像他需要的东西。 –

见上面我的代码 – scriptscale

您可以使用jQuery切换功能来切换链接上的类。

jQuery('a[id^="prod"]').on('click', function (e) { jQuery(this).toggleClass('active'); ...

来源

2017-02-15 14:20:23

您的代码添加类活动，但是当我点击另一个链接，所以它不能删除，也不会添加第二个链接。因为我使用了6个链接，就像折叠 – scriptscale

看到更新后的帖子 – scriptscale

的jQuery：需要添加类“活动”

回答

相关问题