如何addClass與removeClass在錨

我想，當我點擊一個錨，將添加一個類。如何addClass與removeClass在錨

我的標記：

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

等等...

同樣，當錨被激活其它的必須是不活動的，將回到原來的班級。

我有這個代碼現在：只是一個試驗和錯誤。現在我只是玩了兩個主播：class：promo-call & promo-text。奇怪的是，我必須點擊兩次按鈕才能顯示背景圖像。

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"); 
});

僅供參考：我正在使用Jquery-Mobile。

來源

2012-03-20 Wondering Coder

編輯我的文章。張貼我自己的測試代碼，一直在嘗試，但沒有運氣。 T_T – 2012-03-20 11:07:51

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

請注意，這隻適用於您的示例中的單分類元素。

來源

2012-03-20 11:03:02

不太明白。你能解釋一下嗎？ – 2012-03-20 11:04:14

對不起，我已更新我的示例。說，如果你的類是「促銷呼叫」，該功能會得到這樣，通過分割「 - 」在這個例子中籤署和獲得的第二個元素，即「通話」，然後追加「主動呼叫」，並選中此每次點擊該元素時都會有類。 – 2012-03-20 11:07:28

當你選擇一個鏈接，這將不會使其他人不活動 – fcalderan 2012-03-20 11:09:12

試試這個：

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")); 
});

注意的是，這裏promobtt.removeClass('active-text active-data active-call ...');你必須列出你需要使用所有的活動類。

否則，你應該提供一個獨特「活動」類別（例如active），而不是<n>不同的活動類：如果你這樣做只爲造型，你可以風格，你反正鏈接一個類做這樣的事情所以。

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

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

等等。這將簡化CSS代碼和JavaScript代碼，因爲遵循這種方式，您只需要將toggleClass('.active')應用於所有鏈接。

來源

2012-03-20 11:07:45 fcalderan

也爲CSS推薦+1。 – 2012-03-20 11:16:07

With .toggleClass（「promo-call」）你可以得到這個結果

來源

2012-03-20 11:10:52 Frederiek

如何addClass與removeClass在錨

回答

相關問題