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"手动更改为相应的页面。

其次，我如何让格式改变？和必须以什么顺序出现？我试过了：#menuli.current

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

但没有运气。

4

4 回答 4

2

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

#menu li .current.current意思是“内部的任何类元素” li。#menu

#menu li.current意思是“里面li的班级”。.current#menu

是的，添加class="current"到每个页面上的当前菜单项是可以的。

于 2013-07-26T07:05:55.953 回答
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 回答