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、 が赤色に変わります。list22回目にクリック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 
$('li a').click(function(){
    $('a').removeClass('highlight_stay');
    $(this).addClass('highlight_stay');
});

デモ

于 2013-02-14T11:16:06.237 に答える