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

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

html css menu

Html 如何定义其中一个菜单项在默认情况下处于活动状态？,html,css,menu,Html,Css,Menu,如何定义其中一个菜单项在默认情况下处于活动状态 /* CSS */ ul#menu a.active, ul#menu a:focus { outline-style: none; color: #AA0000; font-weight: bold; text-decoration: underline; } /* HTML */ <html> &

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

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

/*CSS*/
菜单a.激活，菜单a:聚焦{
轮廓样式：无；
颜色：#AA0000；
字体大小：粗体；
文字装饰：下划线；
}
/*HTML*/




/*HORMENU_SELECTOR.JS*/
$（文档）.ready（函数（）{
$（'#菜单ul li a'）。每个（函数（）{
var path=window.location.href；
var current=path.substring（path.lastIndexOf（'/'）；
var url=$（this.attr（'href'）；
如果（url==当前）{
$（this.addClass（'active'）；
};
});     
});

您在CSS规则中使用的是pseudo

：active

而不是class

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>

希望对您有所帮助

在我看来，您只需将“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") });

这里的问题是什么？您的代码片段已经显示“Test1”被标记为默认值。请更具体一点。如果你检查它，它不起作用。这就是我问的原因，好吗？@Klausos，你试过我贴的答案了吗？我试过了。因此，我更改了CSS中的以下行：ul#menu a.active，ul#menu a:focus。然后我在之后插入了jQuery脚本。但是什么都没有改变。@klausos，尝试在一个单独的文件中添加jquery脚本，然后链接它。Pliz检查我的更新代码。我发布了CSS、HTML和JS。仍然不起作用。@Klausklausos尝试使用#menu li a而不是#menu ul lia@KlausosKlausos我有一个带有id菜单的div，但您也在使用该id来创建菜单。没有什么变化。

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

$("ul#menu li a").click(function() { $(this).addClass("active") });