1

そのメニューから現在選択されているページを強調表示するようにメニューを取得しようとしています。

http://jsfiddle.net/ePtFq/

私のHTMLコードは次のようになります:

<div class="menu-container">
    <div class="menu-wrapper">
        <ul id="menu">
            <li class="current"><a href="#">HOME</a></li>
            <li><a href="#">ABOUT US</a></li>
            <li><a href="#">SERVICES</a></li>
            <li><a href="#">CONTACT US</a></li>
            <li><a href="#">PHOTOS</a></li>
        </ul>
    </div>
</div>

まず、これは正しい方法ですかhighlight the current page in menu？計画では、各 html ページをclass="current"それぞれのページに手動で変更する予定です。

次に、フォーマットを変更するにはどうすればよいですか? と はどのような順序#menuで表示さliれなければなりませ.currentんか? 私はもう試した：

#menu li .current{
    background: #f00;
}

しかし、運がありません。

4

4 に答える 4

1

liとの間のスペースを削除し.currentます。

#menu li.current{
    background: #f00;
}

特定のクラスを持つ要素をターゲットにする場合、クラスは常に要素の直後に来る必要があります。そうでない場合は、指定されたクラスを持つ要素の子要素をターゲットにしています。

于 2013-07-26T07:04:52.047 に答える
0

これを試して

http://jsfiddle.net/ePtFq/1/

またはJSを使用

 $(document).ready(function (e) {
            var page = top.location.toString().split('/');
            $('#menu').find('a[href="' + page[page.length - 1].toString() + '"]').closest('li').addClass('current');
        });
于 2013-07-26T07:07:13.320 に答える
0

この単純な Javascript を使用してください

function LoadCurrentMenu()
    {
        var str=location.href.toLowerCase();
        $("#menu li a").each(function() {
            if (str.indexOf($(this).attr("href").toLowerCase()) > -1) {
                $("li.current").removeClass("current");
                $(this).parent().addClass("current");
            }
        });
        $("li.current").parents().each(function(){
            if ($(this).is("li")){
                $(this).addClass("current");
            }
        });
     }

以下のようにボディロードイベントでこの関数を呼び出します

<body onload="LoadCurrentMenu();">
</body>
于 2014-12-08T10:45:38.670 に答える