Question

这是我的代码，对象跨度，我只想选择一个元素，当它点击时，改变它的颜色，而其他元素不需要改变颜色。

<!DOCTYPE HTML>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
    .choose {
        color: red;
    } 
        </style>
        <script src="../jquery-1.10.min.js" type="text/javascript"></script>
        <script type="text/javascript">
    $(function() {
            $('.department > a').click(function() {
                var obja = $('.department >a');
                $(this).toggleClass('choose');
        })
    }) 
        </script>
    </head>
    <body>
    <span class="department">
        <a href="javascript:void(0);">hello</a>
        <a href="javascript: void(0);">world</a>
        <a href="javascript: void(0);">google</a>
    </span>
    </body>
    </html>

Answer 1

以下是更正后的功能

$(function() {
            $('.department > a').click(function() {
                var obja = $('.department >a');
                $(this).toggleClass('choose').siblings().removeClass('choose');
        })
    })

Fiddle Demo

Answer 2

这可能对您有所帮助

$(function() {
        $('.department > a').click(function() {
            $('.department > .choose').removeClass('choose');
            $(this).toggleClass('choose');
    })
})

检查here in jsfiddle是否有效。

Answer 3

DEMO

 $(function () {
     $('.department > a').click(function () {
         var obja = $('.department >a');
         obja.removeClass('choose');
         $(this).addClass('choose');
     })
 })

在父元素下更改一个的正确方法

3 个答案: