jQuery活动链接当前页面 [英] jQuery active link current page

问题描述

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

I have tried several jQuery scripts to make my navigation have an active state of each button, when the user is on each page.

我的导航如下: 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>

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

I want that the hover effect, will stay active, when the user visits each page.

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

I really hope someone could give me an idea for this. I tried several things but didn't really could make it work :(

预先感谢;)

推荐答案

您可以轻松完成

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

这篇关于jQuery活动链接当前页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！