jQuery在导航上添加/删除类

如何在我的链接上创建不同的类，以便在点击它们时显示不同的图像？jQuery在导航上添加/删除类

这个想法是，链接有自己的颜色，当它激活时，必须有一个具有相同颜色的小箭头。

这是我到目前为止有：

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>

然后重复蓝色以及。

但它不工作...

我做错了什么？

来源

2011-07-28 Kasper

为什么要删除不存在的类然后重新添加它？ – Andrew

描述功能如何工作，是否还有其他元素？ – jmav

如果第一个链接处于活动状态，它必须具有类red_bnt，并且如果您单击第二个链接，则必须删除red_bnt类。这不是代码的工作原理吗？我是jQuery的新手，所以我可能不理解它的权利。 – Kasper

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

你jQuery是说，点击与类“红”元素时，从所有元素删除类“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到：

<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代替你的图像。

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

来源

2011-07-28 08:16:18

这解释了为什么我的代码无法正常工作。谢谢。我试过了你写的东西，但是当我点击链接时没有任何反应是否因为=“red bnt”之间的空格？ – Kasper

看起来好像这个班级没有添加 – Kasper

@kasper首先，注意我使用了“btn”而不是“bnt”，可能就是这样。其次，它们之间的空间表明它们是两个不同的类（一个“红色”类和一个“btn”类）。 –

我的事情UR使用相同的影像既类,,

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

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

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

来源

2011-07-28 08:22:23 K6t

输入失败:)抱歉。（图像/ blue_bnt_pil.png） – Kasper

jQuery在导航上添加/删除类

回答

相关问题