1

メニュー項目の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

私には、css定義に「a.active」を追加するだけで変更できるようです。

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 に答える