アンカーでクラスとremoveClassを追加する方法

Question

アンカーをクリックすると、クラスが追加されます。

私のマークアップ：

<ul> 
     <li> 
      <a href="<?php echo base_url()?>home/promos/call" class="promo-call"></a> 
     </li> 
     <li> 
      <a href="<?php echo base_url()?>home/promos/text" class="promo-text"></a> 
     </li> 
     <li> 
      <a href="<?php echo base_url()?>home/promos/data" class="promo-data"></a> 
     </li> 
     <li> 
      <a href="<?php echo base_url()?>home/promos/combo" class="promo-combo"></a> 
     </li> 
     <li> 
      <a href="<?php echo base_url()?>home/promos/recent" class="promo-recent"></a> 
     </li> 
    </ul> 

言って、私はクラス=「プロモ・コール」をクリックした場合、それはクラスのアクティブ・コールが追加されますと、私はプロモーションテキストをクリックしたとき、それはクラスのアクティブ・テキストを追加します。

ちょうど私の心に何を明確にすべき：

例： クリックプロモコール

<a href="<?php echo base_url()?>home/promos/call" class="promo-call active-call"></a> 

プロモデータをクリックしたときにプロモーションテキスト

<a href="<?php echo base_url()?>home/promos/text" class="promo-text active-text"></a> 

をクリック

<a href="<?php echo base_url()?>home/promos/data" class="promo-text active-data"></a> 

など...

また、アンカーがアクティブな場合、残りはアクティブでなくてはならず、元のクラスに戻ります。

私はこのコードを今すぐ持っています： 試行錯誤してください。今のところ私は2つのアンカーを演奏しています：class：promo-call & promo-text。奇妙なのは、背景イメージを表示するためにボタンを2回クリックしなければならないことです。

jQuery(document).delegate(".promo-call","click",function(e){ 
    jQuery(".promo-text").removeClass("active-text"); 
    jQuery(".promo-call").addClass("active-call"); 
}); 

jQuery(document).delegate(".promo-text","click",function(e){ 
    jQuery(".promo-text").addClass("active-text"); 
    jQuery(".promo-call").removeClass("active-call"); 
}); 

FYI：Jquery-Mobileを使用しています。

Answer 1

$('a[class^="promo"]').on('click', function() { 

    $.each('a[class^="promo"]', function() { 
     $(this).attr('class',''); 
    }); 

    var currentClass = $(this).attr('class'); 

    if(currentClass) 
    { 
     var startClass = string.split('-'); 

     if(startClass.length > 1) 
     { 
      $(this).toggleClass('active-' + startClass[1]); 
     } 
    } 
}); 

これは、例のように単一クラスの要素に対してのみ機能することに注意してください。ここpromobtt.removeClass('active-text active-data active-call ...');あなたが使用する必要があるすべてのアクティブなクラスを一覧表示する必要が

var promobtt = $('a[class^="promo"]'); 

promobtt.on('click', function(evt) { 
    evt.preventDefault(); 
    promobtt.removeClass('active-text active-data active-call ...'); 
    $(this).addClass(this.className.replace(/^promo/, "active")); 
}); 

注：

Answer 2

はこれを試してみてください。

そうでなければ、あなたが代わりに<n>異なるアクティブなクラスの1ユニーク「アクティブ」クラス（例えばactive）を提供する必要があります：あなただけのスタイリングの問題のためにこれをやっている場合のようにやって一つのクラスでとにかくあなたをリンクのスタイルができそう。

.promo-text { ... } 
.promo-text.active { ... } 

.promo-data { ... } 
.promo-data.active { ... } 

などとなる。これは、あなたがすべてのリンクに適用されるtoggleClass('.active')を必要とするだけであるので、これはCSSコードとJavaScriptコードの両方を単純化するでしょう。 .toggleClassで

Answer 3

（「プロモ・コール」）あなたは