jQueryの：ここにクラスを追加する必要がある「アクティブ」

Question

は私のコード、

詳細です： 私は2つのdivを持っている、と私は（最初のリンク）をクリックしてくださいので、（最初の詳細）開いたとき。 次に（2番目のリンク）をクリックして、（2番目の詳細）を開きます。 これをクリックすると、最初のリンクactiveを最初のリンクに追加する必要があります。 アクティブなクラスを削除して追加したとき（2番目のリンク） 。私は再び（2番目のリンク）をクリックし、アクティブなクラスを削除します。

これは私がクリックするコードです。私は<a>タグに "アクティブ"クラスを追加する必要があります。 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> 

Answer 1

あなたの命令が従うことが少し難しいですが、私は、これはあなたが後にしているものかもしれないと思う...

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 

}); 

Answer 2

ちょうどあなたの要素にイベントのonClickを追加し、にこのコードを実行します。

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

Answer 3

あなたはこのような何かを意味するか： それは一種の醜いだが、多分助けることができます。

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

}); 

Answer 4

jQueryトグル機能を使用すると、リンク上のクラスを切り替えることができます。

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