3

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

我的导航看起来像这样：http: //jsfiddle.net/EWhS3/

或者

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

我希望悬停效果在用户访问每个页面时保持活跃。

我真的希望有人能给我一个想法。我尝试了几件事，但并没有真正使它起作用:(

提前致谢 ;）

4

3 回答 3

11

你可以轻松做到

<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}
于 2014-04-23T18:49:12.167 回答
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 {
    ...
}

演示：小提琴

于 2013-11-13T00:52:23.363 回答
0 
<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 */
}
于 2013-11-13T03:47:18.517 回答