Question

您好我刚开始使用jquery而且不知道为什么这不起作用... 我想在点击后更改链接的颜色。当点击其他链接时，链接应该再次变为白色，当前点击的项目应为黄色......但所有链接都保持黄色......？！

  <script type="text/javascript">
            $(document).ready(function() {
                $('.main a').click(function(){
                $(this).css({"color":"#ffd601"});
                $(this).siblings('a').css({"color":"#fff"});
                });


            });


        </script> 

<div id ="navigation">
            <ul class="main">
                <li><a href="#test1">Test1</a></li>
                <li><a href="#test2">Test2</a></li>
                <li><a href="#test3">Test3</a></li>
                <li><a href="#test34">Test4</a></li>

            </ul>

Answer 1

如果你想通过兄弟姐妹来做，你可以这样做：

$(document).ready(function() {
 $('.main li').click(function(){
 /*finding link inside the li */ 
 $(this).find('a').css({"color":"#ffd601"});
 /*finding siblings of li and then link inside it */
 $(this).siblings().find('a').css({"color":"#fff"}); 
 });
});

Answer 2

您定位的锚元素是内部LI元素，因此它们没有兄弟姐妹！

你可以这样：

$(document).ready(function() {
    $('.main a').click(function() {
        $(this).css({
            "color": "#ffd601"
        })
        // go up to the UL element, find all anchors and exclude the current
        .closest('ul').find('a').not(this).css({
            "color": "#fff"
        });
    });
});

<强> DEMO

Answer 3

尝试以下方法：

http://jsfiddle.net/adkWe/13/

编辑：

它使用相同的原理，但我已将样式提取到css类。

Answer 4

您可以对当前代码进行简单的更改：

$(this).parent().siblings().find('a').css({"color":"#fff"});

有效地<a>没有简化，所以你使用.parent()来移动<li>并选择他们的兄弟姐妹。

Ive updated your fiddle

的Al

Answer 5

锚标签位于列表项标签内，因此它们没有兄弟姐妹。

alert($(this).siblings('a').length); // this alerts 0 in your fiddle

修复：

http://jsfiddle.net/adkWe/23/

$(this).parents('ul').find('a').not(this).css({"color":"#fff"});

Answer 6

您无法访问兄弟姐妹，因为您的锚元素包含在li元素中。

 div#navigation
     ul.main
       li
          a
       li
          a
       li
          a
       li
          a

您可以选择导航中的每个内容，例如

$('#nav a').each(function(i,val){
    $(this).css(...);
});

Answer 7

您需要父母LI兄弟姐妹

$('.main a').click(function(){
       $(this).css({"color":"#ffd601"});
       $(this).parent('li').siblings().find('a').css({"color":"#fff"});
});

在父（）中使用标记名作为参数是没有必要的，这只是为了清楚起见

改变兄弟姐妹的颜色失败了jquery

7 个答案: