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>

说如果我点击了class =“promo-call”，它会添加类active-call，当我点击promo-text时，它会添加class active-text。

要清楚我的想法：

E.g：点击促销电话

<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＆amp;促销文本。奇怪的是，我必须点击两次按钮才能显示背景图片。

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。

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

请注意，这仅适用于您的示例中的单类元素。

Answer 2

试试这个：

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')应用于所有链接。

Answer 3

使用.toggleClass（“promo-call”），您可以获得此结果

如何在锚中添加类和removeClass

3 个答案: