Question

如何在链接上创建不同的类，以便在单击它们时显示不同的图像？

这个想法是链接有自己的颜色，当它处于活动状态时，必须有一个颜色相同的小箭头。

这是我到目前为止所做的：

HTML：

<ul>
    <li class="red"><a href="#">Link one</a></li>
    <li class="blue"><a href="#">Link two</a></li>
</ul>

CSS：

.red {background-color:#f00; }
.red_bnt { background-image:url(image/red_bnt_pil.png); }

.blue {background-color:#00f; }
.blue_bnt { background-image:url(image/red_bnt_pil.png); }

jQuery的：

<script type="application/x-javascript">

$('.red').click(function(){
    $('.red').removeClass('red_bnt');
    $(this).addClass('red_bnt');
});

</script>

然后将其重复为蓝色。

但它不起作用......

我做错了什么？

Answer 1

$('.red').click(function(){
    $('.red').removeClass('red_bnt');
    $(this).addClass('red_bnt');
});

你的jQuery说当点击一个类为“red”的元素时，用“red”类从所有元素中删除类“red_bnt”，然后将red_bnt添加到被点击的元素中。由于蓝色按钮没有红色类，因此它甚至不会输入等式。相反，在按钮上添加一个公共类，然后使用一个公共类名，例如“active”，它将激活后台CSS。

我将你的CSS更改为：

.red.btn {background-color:#f00; }
.red.hover,
.red.active { background-image:url(image/red_bnt_pil.png); }

.blue.btn {background-color:#00f; }
.blue.hover,
.blue.btn.active { background-image:url(image/blue_bnt_pil.png); }

HTML to：

<ul>
    <li class="red btn"><a href="#">Link one</a></li>
    <li class="blue btn"><a href="#">Link two</a></li>  
</ul>

和jQuery：

<script type="application/x-javascript">
$(function() {
    $('li.btn').click(function(){
        // Add "active" to the clicked element and
        // get all siblings and remove "active" from them
        $(this).addClass('active').siblings().removeClass('active');
    });

    // Use this for hover
    $('li.btn').hover(function() {
        $(this).addClass('hover');
    }, function() {
        $(this).removeClass('hover');
    });
});
</script>

这是一个jsFiddle：http://jsfiddle.net/FS4Du/。我使用了深色和dodgerblue的颜色来代替你的图像。

注意：我使用悬停类而不是仅仅重用active来避免必须处理被点击的元素（活动元素）然后悬停的情况。

Answer 2

我对你们两个人使用相同的图像，

.red_bnt { background-image:url(image/**red_bnt_pil.png**); }

.blue {background-color:#00f; }
.blue_bnt { background-image:url(image/**red_bnt_pil.png**); }

......................................

jQuery在nav上添加/删除类

2 个答案: