如何定义菜单项之一默认为活动状态?

    /* 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');
        };
    });
    });

最佳答案

假设您有这样的事情,

<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');
    };
});

});


希望能帮助到你

关于html - 如何定义菜单项之一默认为事件状态?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/10514915/

10-12 03:14