jQuery活动链接当前页面

Question

我尝试过几个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>

我希望当用户访问每个页面时，悬停效果仍然保持活动状态。我真的希望有人能给我一个思路。我尝试了几种方法，但并没有真正使它工作:( 提前感谢;)

- Kh4zy

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}

- Md Rahman

---

重复的 http://stackoverflow.com/a/9863488/383904 ... - Roko C. Buljan

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

Demo: Fiddle

- Arun P Johny

---

@user2985592 当您转到新页面时，无论页面是否重新加载，还是使用ajax加载新页面？ - Arun P Johny

只有当我点击第一个链接时才会出现。我没有使用jQuery的经验。我使用的是jquery-1.9.1.min.js。 - Kh4zy

你好。我找到了一个脚本，它运行得很好。你的也可以，只是我需要将JS脚本应用到我的其他网站上。$(function () { var url = window.location.pathname, urlRegExp = new RegExp(url.replace(//$/, '') + "$");
$('a').each(function () { if (urlRegExp.test(this.href.replace(//$/, ''))) { $(this).addClass('active'); } }); });但是我有一个问题，你的和我的都有这个问题。我需要index.php（profil）从一开始就被标记为活动状态，而不仅仅是在点击时 :) - Kh4zy

@user2985592，如果第一页的URL是index.php，那么它应该被标记。 - Arun P Johny

网址只是index.php。 但如果我输入我的网站（我离线工作），但如果我输入我的网址localhost/site/，它不会被标记，只有当我使网址为localhost/site/index.php时才会被标记。 - Kh4zy

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

- Yee Cheing Seah