как определить, какой якорь в элементе li активен

Question

У меня есть этот код ниже:

<li>
  <a href="<?php echo base_url()?>home/promos/call" class="promo-call active-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>

Что я хочу сделать, так это когда пользователь щелкает класс promo-text, к нему добавляется active-text в свойстве класса

Например:

<a class="promo-text active-text></a>

и добавит этот стиль CSS: background:url(../images/call_icon_0.png) 0 -72px no-repeat!important;

Конечно, мне нужно удалить актив в другом классе.

Answer 1

Если вы не возражаете против использования Javascript + Jquery + CSS, попробуйте следующее.

Сначала создайте CSS-класс следующим образом -

.active-text
{
    background: url(../images/call_icon_0.png) 0 -72px no-repeat;
} 

Затем используйте следующий код JQuery -

$(document).ready(function()
{
    $("li a").click(function()
    {
        $("li a.active-text").removeClass("active-text");
        $(this).addClass("active-text");
    });
});

jsFiddle демо.

Чтобы добавить какой-либо определенный стиль CSS к элементу, используйте функцию css () -

$(this).css("color", "red");

Это динамически добавит color:red стиль CSS к выбранному элементу. Таким способом вы можете добавить любое правило CSS.

Answer 2

Вместо использования отдельного класса вы можете использовать псевдокласс a: active

a.promo-text {
 /* some style */
}
a.promo-text:active {
 background:url(../images/call_icon_0.png) 0 -72px no-repeat!important;
}

, если у вас есть несколько фонов для каждой ссылки,

a.promo-text:active {
 /* text_icon background */
}
a.promo-call:active {
 /* call_icon background */
}


a.promo-recent:active {
 /* recent_icon background */
}

и т. Д.

Answer 3

Используя javascript и jquery, вы можете использовать http://api.jquery.com/click/:

$('li a').click(function(){
    // remove all classes
    $('li a').removeClass('active-text');

    // add class to the selected element
    $(this).addClass('active-text);
});

Answer 4

Если я прав, то вы не можете добавить встроенный стиль с опцией !important, поэтому вы должны создать отдельный класс или идентификатор для этого случая (класс был бы лучше, если бы я предложил). Также. У вас может быть более одного списка на странице, поэтому лучше работать с одним конкретным, поэтому вы выбираете наиболее близкий к вашему li, но если ваша ссылка куда-то пойдет (не на действие страницы), то она перезагрузится и будет нет смысла в JavaScript. Лучше добавить с PHP тогда. Или, если вы как-то разберетесь с Javascript или сделаете Ajax-вызов, то это нормально (вероятно).

<style type="text/css">
.active-text {
    background: url(../images/call_icon_0.png) 0 -72px no-repeat !important;
}
</style>

<script type="text/javascript">
$(function()
{
    $('li a').click(function(){
        var $this = $(this);

        $this.closest('ul').find( 'li a' ).removeClass('active-text');

        $this.addClass('active-text);
    });
});
</script>

Answer 5

$(document).ready(function(){
  $("li a").click(function(){
     $(this).addClass("class name here").parent().siblings().children("a").removeClass("to remove class name here");
  });
});

Должен доставить вас туда.

Answer 6

Используя чистый CSS, вы не сможете установить новый класс одним кликом, для этого вам понадобится Javascript.(см. пример ответа xylar)

Если вы заинтересованы в изменении стиля при наведении, то есть когда пользователь наводит указатель мыши на элемент списка, вы можете использовать директиву li:hover CSS.

Answer 7

Установите его вручную, так как он будет перенаправлен на другую страницу после нажатия.

Например, на странице вызова это будет код:

    <li>
        <a href="<?php echo base_url()?>home/promos/call" class="promo-call active-text active-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>

В текстовой странице:

    <li>
        <a href="<?php echo base_url()?>home/promos/call" class="promo-call active-call"></a>
    </li>
    <li>
        <a href="<?php echo base_url()?>home/promos/text" class="promo-text active-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>