Question

我有以下css和jquery代码，试图在点击ul中的文本时更改文本颜色。如果当前文本颜色为＃d49a9a，我想将其更改回＃c2c0c0，反之亦然。

.navContainer ul{
    left: 10px;
    top:  20px;
    position: absolute;
    color: #c2c0c0;
    font-family: 'Terminal Dosis';
    font-weight: 200;
    font-size: 20pt;
    list-style-type: none;
    line-height: 50px;
}
.navContainer a {
    text-decoration: none;
    color: #c2c0c0;
}
.navContainer {
    left: 150px;
    top: 150px;
    position: absolute;
}

编辑---这是我的HTML

<head>
...some code
<script type="text/javascript">
            $("#navContainer li").click( function() { 
              $("#navContainer li").css("color", "#d49a9a");
              $(this).css("color", "#c2c0c0");
            });
            </script>
</head>
<div class="navContainer">
            <ul>
                <li class="navText">Work</li>
                <li class="navText"><a href="#">Blog</a></li>
                <li class="navText">About</li>
                <li class="navText">Contact</li>
            </ul>
        </div>

请你告诉我我做错了什么。

Answer 1

好的，我看到发生了什么。最初你有错误的标签，但目前你需要使用$(".navContainer li")而不是$("#navContainer li")因为navContainer是一个类而不是id。我已经把一个演示组合在一起，这应该让你去。

http://jsfiddle.net/nHJvz/1/

Answer 2

替换

<script type="text/javascript">
            $("#navContainer li").click( function() { 
              $("#navContainer li").css("color", "#d49a9a");
              $(this).css("color", "#c2c0c0");
            });
 </script>

与

 <script type="text/javascript">
    $(document).ready(function(){
                $(".navContainer li").click( function() { 
                  $(".navContainer li").css("color", "#d49a9a");
                  $(this).css("color", "#c2c0c0");
                });
    });

    </script>

还要确保正确加载jQuery，就像put一样 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 在<head> 您可能会看到演示http://jsfiddle.net/CedZs/

单击jquery更改文本颜色

2 个答案: