无法在无序列表中访问同级<a>元素的CSS
无法在无序列表中访问同级<a>元素的CSS
提问于 2012-12-10 02:52:02
我有一个jQuery脚本，在大多数情况下都运行良好。我有一个链接列表，我点击这些链接来显示/隐藏特定的DIV元素。当我点击一个链接，它的CSS改变(颜色的链接更改为红色)。
<ul style="list-style: none;">
<li><a href="#" class="review-link" name="review-1">Click to see Review 1</a></li>
<li><a href="#" class="review-link" name="review-2">Click to see Review 2</a></li>
<li><a href="#" class="review-link" name="review-3">Click to see Review 3</a></li>
</ul>jQuery
$(".review-link").click(function () {
var divname = this.name;
$("#"+divname).show("slow").siblings().hide("slow");
$(this).css("color","red");
$(this).siblings().css("color","green")
});我遇到困难的是让所有的，其他的链接复位到他们原来的颜色。在我的例子中，我试图将所有其他链接都转到颜色为绿色的地方，但我甚至无法做到这一点。也许我不理解jQuery中的“兄弟”属性？
下面是一个jsFiddle示例。
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-12-10 02:54:09
.review-link元素没有兄弟姐妹。你想要它的父元素的兄弟姐妹。
你可以用这样的东西来代替。
$(this).parent().siblings().find("a").css("color","green")Stack Overflow用户
发布于 2012-12-10 02:55:04
在onclick事件中，将所有链接设置为原始颜色，然后再执行其他操作。
$(document).ready(function(){
$(".review-link").css("color","green")
$(".review-link").click(function () {
var _this=$(this);
_this.closest("ul").find(".review-link").css("color","green");
//your remaining code goes here
});
});工作样本http://jsfiddle.net/uCS3P/5/
Stack Overflow用户
发布于 2012-12-10 03:08:15
$.siblings()查找直接相关的元素。在本例中，$(this)指的是被单击的<a>元素，因为每个链接都嵌套在<li>标记中，所以它没有直接的兄弟节点。
$(this).parent().siblings().find('a').css("color","green");
或
$(this).parent().siblings().children('a').css("color","green");
会起作用的。
您可能需要考虑使用addClass和removeClass，而不是直接用jQuery更改css，这样可以保持标记和脚本的分离更完整。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13794343
复制相关文章
相似问题
腾讯云开发者
