Question

我正在尝试让菜单突出显示当前所选页面。

我的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;
}

但没有运气。

Answer 1

删除li和.current之间的空格。

#menu li .current表示“.current内的li内的#menu类的任何元素。”

#menu li.current表示li内的.current类“{1}}。”

是的，可以将#menu添加到每页的当前菜单项中。

Answer 2

删除li和.current之间的空格。

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

当您使用特定类定位元素时，该类应始终直接位于该元素之后。如果没有，您将瞄准具有指定类的元素的任何子元素。

Answer 3

试试这个

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

OR 用过JS

 $(document).ready(function (e) {
            var page = top.location.toString().split('/');
            $('#menu').find('a[href="' + page[page.length - 1].toString() + '"]').closest('li').addClass('current');
        });

Answer 4

使用这个简单的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>

当前页面在菜单中突出显示

4 个答案: