Question

<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时，它会变成红色。如果我第二次点击list2，list1将更改为原始颜色，list2将为红色。喜欢它想要工作。同时鼠标悬停也要将列表激活为红色。

任何人都可以提供帮助吗？请！

Answer 1

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

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

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

Answer 2

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

demo

Answer 3

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

$(function () {
    $('li a').click(function () {
        $('li a').each(function () {
            $(this).removeClass("highlight");
        });
        $(this).addClass('highlight');
    });
});

更改鼠标上的活动菜单颜色，然后使用jquery单击事件

3 个答案: