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;

当然我需要删除其他类中的active。

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

使用javascript＆amp; 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 3

您可以使用伪类 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 4

手动设置，因为它会在点击后重定向到另一个页面。

例如在通话页面中，这将是代码：

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

Answer 5

使用纯CSS，您无法在点击时设置新类，您需要使用Javascript。（参见xylar对一个例子的回答）

如果您有兴趣在悬停时更改样式，即当用户将鼠标移到列表项上时，您可以使用li:hover CSS指令。

Answer 6

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

应该让你到那儿。

Answer 7

如果我是对的，那么你就不能用!important选项添加内联样式，因此你应该为那种情况创建单独的类或id（我会更好地使用类）。也。您可能在页面上有多个列表，因此最好使用一个特定的列表，因此您最接近您的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>

如何确定li元素中的哪个锚是活动的

7 个答案: