1

如何定义默认情况下其中一个菜单项处于活动状态？

    /* CSS */
        ul#menu a.active, ul#menu a:focus {
        outline-style: none;
        color: #AA0000;
        font-weight: bold;
        text-decoration: underline;
        }

    /* HTML */
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <script type="text/javascript" src="scripts/hormenu_selector.js"></script>

        </head>
        <body>
<div  id = "menu">
        <ul>
        <li><a href="#" class="active">Test1</a></li>
        <li><a href="#">Test2</a></li>
        </ul>
</div>
    </body>
    </html>


    /* HORMENU_SELECTOR.JS */
    $(document).ready(function() {
    $('#menu ul li a').each(function() {
        var path = window.location.href;
        var current = path.substring(path.lastIndexOf('/'));
        var url = $(this).attr('href');

        if (url == current) {
            $(this).addClass('active');
        };
    });     
    });
4

3 回答 3

1

您在 CSS 规则中使用伪:active而不是类active。

尝试：

ul#menu a.active, ul#menu a:focus
于 2012-05-09T11:15:22.097 回答
1

假设你有这样的东西，

<div id="Menu"> 
<ul>
<li><a href="/Home.aspx">Home</a></li>
<li><a href="/Products.aspx">Products</a></li>
<li><a href="/AboutUs.aspx">About us</a></li>
<li><a href="/ContactUs.aspx">Contact us</a></li>
</ul>
</div>

对于要选择的活动菜单项，请尝试使用 jquery

$(document).ready(function() {

$('#Menu ul li a').each(function() {
    var path = window.location.href;
    var current = path.substring(path.lastIndexOf('/'));
    var url = $(this).attr('href');

    if (url == current) {
        $(this).addClass('active');
    };
});     

});

希望能帮助到你

于 2012-05-09T11:15:57.760 回答
0

在我看来，您可以将“a.active”添加到css定义中：

ul#menu li a.active, ul#menu li a:focus {
    outline-style: none;
    color: #AA0000;
    font-weight: bold;
    text-decoration: underline;
}

这样，由于类的原因，它最初是活跃的。您还可以删除 a:active 并像这样使用 jquery：

$("ul#menu li a").click(function() { $(this).addClass("active") });
于 2012-05-09T11:15:59.470 回答