Html 当前菜单页的CSS状态？

首先，我有一个无序的列表保存着我的菜单

<ul id='css3menu1' class='topmenu'>
    <li class='topmenu'>
        <a href='home.html'>Home</a>
    </li>
    <li class='topmenu'>
        <a href='forum.php'>Forum</a>
    </li>
    <li class='topmenu'>
        <a href='policy.html'>Policy</a>
    </li>
    <li class='topmenu'>
        <a href='logout.php'>Log out</a>
    </li>
</ul>

我想做的是，每当用户在页面上时，悬停状态变为活动状态。换句话说，根据用户所在的页面，将菜单项的背景颜色更改为较暗的颜色

---

实现这一点最常见的方法是向当前页面的链接添加一个类，如active。具体如何做取决于模板引擎

然后在css中添加该规则：

var url = window.location.href;

$('.topmenu a').filter(function() {
    return this.href == url;
}).addClass('active');

这应该行得通。 并添加一个css类用于活动

.topmenu.active {
    background-color: black;
}

编辑/更新 添加了JSFIDLE：

this.href不采用相对路径。它返回了href设置的完整路径。因此，它会将location.href与该url元素的href进行比较

---

这是一个非常简短而简单的解决方案：

如果您对jQuery解决方案感兴趣的话

<script>
  $(function() {
    $('#css3menu1 li a[href="'+location.href.split('/').pop()+'"]').addClass('active');
  });
</script>

---

*注意：将脚本放在标记的前面，当然在文档的标题部分包括jQuery库。

如何根据URL将活动类添加到导航菜单中

HTML

JavaScript

上面的例子来自link。有关更多信息和示例，请访问它。

使用javascript：

$(function () {
    var url = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
    $('[href$="' + url + '"]').parents("li").addClass("current_menu_item");
});

在css中定义当前菜单项：

#menu
{
    background: #292929;
}

#menu ul .current_menu_item > a /* highlight current menu, target immediate child */
{
    color: Yellow;
}

#menu ul li
{
    // menu list style
}

#menu ul li a
{
    // menu word style
}

您的html应该如下所示：

<div id="menu">
    <ul>
        <li>
           <a href='home.html'>Home</a>
        </li>
        <li class='topmenu'>
            <a href='forum.php'>Forum</a>
        </li>
        <li class='topmenu'>
            <a href='policy.html'>Policy</a>
        </li>
        <li class='topmenu'>
            <a href='logout.php'>Log out</a>
        </li>
    </ul>
</div>

最后定义javascript在页面中的位置：

<script type="text/javascript" src="Scripts/common.js"></script>

---

是的，但是如何选择该状态以便设置其样式？因为我认为活动是针对已访问的链接。此外，我如何知道用户在哪个页面上？：active是一个伪类。你可以自由创建一个.active类。类名实际上并不意味着什么，你赋予它们意义，所以你添加了一个规则.active{background:gray；}这样，任何带有该类的元素都会得到背景，很可能与你在：hover中使用的样式相同。如果我对每个元素都这样做，我如何知道当前选择的页面是哪一页？如何知道用户在哪一页？那么您是如何生成html的呢？它取决于堆栈和模板引擎，通常可以添加条件并执行类似active的操作。不添加类。使用函数getCurentFileName{var pagePathName=window.location.pathname；返回pagePathName.substringpagePathName.lastIndexOf/+1；}要获取当前文件名，this.href->不返回相对路径。所以您不能在jsfiddle.this+上测试它！重要人物成功了。感谢您抽出时间：

$(function () {
    var url = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
    $('[href$="' + url + '"]').parents("li").addClass("current_menu_item");
});

#menu
{
    background: #292929;
}

#menu ul .current_menu_item > a /* highlight current menu, target immediate child */
{
    color: Yellow;
}

#menu ul li
{
    // menu list style
}

#menu ul li a
{
    // menu word style
}

<div id="menu">
    <ul>
        <li>
           <a href='home.html'>Home</a>
        </li>
        <li class='topmenu'>
            <a href='forum.php'>Forum</a>
        </li>
        <li class='topmenu'>
            <a href='policy.html'>Policy</a>
        </li>
        <li class='topmenu'>
            <a href='logout.php'>Log out</a>
        </li>
    </ul>
</div>

<script type="text/javascript" src="Scripts/common.js"></script>