как добавитьClass и удалить Class в якоре - PullRequest
Новая
       5

как добавитьClass и удалить Class в якоре

1 голос
/ 20 марта 2012

Что я хочу, так это когда я нажимаю на якорь, он добавляет класс.

Моя разметка: 

    <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, и когда я нажму на промо-текст, он добавит класс active-text.

Просто чтобы понять, что у меня на уме:

Например: при нажатии на промо-звонок 

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

И так далее ...

Также, когда якорь активен, остальные должны быть неактивны и вернутся в свой первоначальный класс.

У меня есть этот код прямо сейчас: просто методом проб и ошибок.Сейчас я просто играю в два якоря: класс: промо-звонок и промо-текст.Что странно, я должен дважды щелкнуть кнопку для отображения фонового изображения. 

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.

Ответы [ 3 ]

1 голос
/ 20 марта 2012

попробуйте это: 

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'), примененный ко всем ссылкам.

1 голос
/ 20 марта 2012 
$('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]);
       }
   }
});

Обратите внимание, что это будет работать только для элементов одного класса, как в вашем примере.

0 голосов
/ 20 марта 2012

С помощью .toggleClass ("promo-call") вы можете получить этот результат

...