Question

当用户在每个页面上时，我尝试了几个jQuery脚本，使我的导航具有每个按钮的活动状态。

或

<div id="wrapper">
        <div id="header">
            <img src="img/logo.png">
        </div>
        <!--header END-->
        <div id="nav">
            <ul>        
                <li><a href="index.php" class="select">Profil</a></li>
                <li><a href="referencer.php" class="pushlinks" class="select">Referencer</a></li>
                <li><a href="projekter.php" class="pushlinks" class="select">Projekter</a></li>
                <li><a href="galleri.php" class="pushlinks" class="select">Galleri</a></li>
                <li><a href="blog.php" class="pushlinks" class="select">Blog</a></li>
                <li><a href="#" class="pushlogin" class="select">Login</a></li>
            </ul>
        </div>
        <!--nav END-->
        <div id="content">
        </div>
    </div>

我希望当用户访问每个页面时，悬停效果会保持活动状态。

我真的希望有人能给我一个这样的想法。我尝试了几件事，但实际上并没有让它发挥作用:(

提前致谢;）

Answer 1

您可以轻松完成

<script type="text/javascript">
  var loc = window.location.pathname;

   $('#nav').find('a').each(function() {
     $(this).toggleClass('active', $(this).attr('href') == loc);
  });
</script>

的CSS：

#nav a.active{color: red}

Answer 2

尝试

jQuery(function () {
    var page = location.pathname.split('/').pop();
    alert(page)
    $('#nav li a[href="' + page + '"]').addClass('active')
})

同时将hover & active规则更改为

#nav ul li a:hover, #nav ul li a.active {
    ...
}

演示：Fiddle

Answer 3

<div id="nav">
        <ul>        
            <li id="nav1"><a href="index.php">Profil</a></li>
            <li id="nav2"><a href="referencer.php" class="pushlinks" class="select">Referencer</a></li>
            <li id="nav3"><a href="projekter.php" class="pushlinks" class="select">Projekter</a></li>
            <li id="nav4"><a href="galleri.php" class="pushlinks" class="select">Galleri</a></li>
            <li id="nav5"><a href="blog.php" class="pushlinks" class="select">Blog</a></li>
            <li id="nav6"><a href="#" class="pushlogin" class="select">Login</a></li>
        </ul>
    </div>

<script type="text/javascript">//<![CDATA[
$('#nav1').addClass('active');  
  //]]></script>


div#nav ul li.active{
 /*your style */
}

jQuery活动链接当前页面

3 个答案: