Question

首先，我有一个无序列表，其中包含我的菜单。

<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>

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

enter image description here

Answer 1

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

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

.active {
  background: #f1f1f1;
  border-top: 3px solid #cecece;
}

*注意：将脚本放在</body>标记之前，当然还包括文档头部的jQuery库。

Answer 2

实现此目的的最常见方法是在当前页面的链接中添加类active。具体怎么做取决于你的模板引擎。

然后在css中添加该规则：）

Answer 3

var url = window.location.href;

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

这应该有效。并为＆＃34; active＆＃34;

添加一个css类

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

编辑/更新 添加了jsfiddle：http://jsfiddle.net/2XeWB/

this.href没有采取相对路径。无论href设置如何，它都会返回完整路径。因此，它将确切的location.href与该url-element的href进行比较。

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

Answer 4

如何基于URL

将活动类添加到导航菜单

<强> HTML

 <menu id="nav">

    <ul>
        <li><a href="active.html">Home</a></li>
        <li><a href="active1.html">Contact</a></li>
        <li><a href="active2.html">About</a></li>
        <li><a href="active3.html">Portfolio</a></li>
    </ul>

</menu>

<强> CSS

    #nav {
    margin:200px auto;
    width:430px;
    }

#nav ul {
    list-style:none;
    background-color:#64abfb;
    }

#nav ul li {
    display:inline-block;
    line-height:44px;
    }

#nav ul li a {
    margin:10px;
    color:#FFF;
    padding:4px;
    font-size:20px;
    text-decoration:none;
    }

#nav ul li a:hover {
    border-bottom:3px #FFF solid;
    }

#nav ul li .active {
    border-bottom:3px #FFF solid;
    }

<强>的JavaScript

  $(function() {
     var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
     $("#nav ul li a").each(function(){
          if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
           $(this).addClass("active");
     })});

上面的示例来自this链接。访问它以获取更多信息和示例。

Answer 5

使用javascript：

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

并在你的css中定义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
}

你的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>

当前菜单页面的CSS状态？

5 个答案: