1 
<html>
    <head>
        <title>menu</title>
        <style>
            .highlight, .highlight_stay {
                color:red;
            }
        </style>
        <script type="text/javascript" src="jquery-1.7.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $('li a').hover(function() {
                    $(this).addClass('highlight');
                }, function() {
                    $(this).removeClass('highlight');
                });
                $('li a').click(function() {
                    $(this).addClass('highlight_stay');
                });
            });
        </script>
    </head>
    <body>
        <ul>
            <li><a href="#" style="text-decoration:none;">list1</a>
            </li>
            <li><a href="#" style="text-decoration:none;">list2</a>
                <ul>
                    <li><a href="#" style="text-decoration:none;">sublist1</a>
                    </li>
                    <li><a href="#" style="text-decoration:none;">sublist2</a>
                    </li>
                    <li><a href="#" style="text-decoration:none;">sublist3</a>
                    </li>
                    <li><a href="#" style="text-decoration:none;">sublist4</a>
                    </li>
                </ul>
            </li>
            <li><a href="#" style="text-decoration:none;">list3</a>
            </li>
            <li><a href="#" style="text-decoration:none;">list4</a>
            </li>
        </ul>
    </body>
</html>

它将所有列表更改为红色。但是，我想要以下要求。

第一次单击时list1，它变为红色。如果我在第 2 次单击list2，list1将更改为原来的颜色，list2并将变为红色。明智地它想要工作。同时鼠标悬停也想激活列表为红色。

任何人都可以帮忙吗？请！

4

3 回答 3

1

只需更改单击处理程序以首先highlight_stay从当前拥有它的任何元素中删除该类。

$('li a').click(function(){
    $('.highlight_stay').removeClass('highlight_stay');
    $(this).addClass('highlight_stay');
});

演示：http: //jsfiddle.net/gFzL2/

于 2013-02-14T11:13:04.307 回答
0

使用 CSS 进行悬停，它比 jQuery 高效得多。您可以使用 .each 删除所有突出显示，然后突出显示您想要的。我刚刚在这里做了一个 jsfiddle - http://jsfiddle.net/Ezb4v/

$(function () {
    $('li a').click(function () {
        $('li a').each(function () {
            $(this).removeClass("highlight");
        });
        $(this).addClass('highlight');
    });
});
于 2013-02-14T11:19:28.937 回答
0 
$('li a').click(function(){
    $('a').removeClass('highlight_stay');
    $(this).addClass('highlight_stay');
});

演示

于 2013-02-14T11:16:06.237 回答