jQuery活动链接当前页面[重复]答案

【问题标题】：jQuery active link current page [duplicate]jQuery活动链接当前页面[重复]
【发布时间】：2016-02-02 06:11:25
【问题描述】：

我已经尝试了几个 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>

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

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

提前致谢；）

【问题讨论】：

标签： jquery html css

【解决方案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}

【讨论】：

stackoverflow.com/a/9863488/383904 的副本 ...

【解决方案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

【讨论】：

它不起作用 :( 只有第一个链接处于活动状态，并且它有一个错误，因为文本链接在活动时应该是紫色的，因为它的效果与悬停相同。点击其他链接时它不会使当前页面处于活动状态
@user2985592 当您移动到新页面时，无论页面是重新加载还是使用 ajax 加载新页面
只有当我点击第一个链接时。我对 jQuery 没有任何经验。我使用 jquery-1.9.1.min.js
@user2985592 我已经在脚本中添加了一个警报，请检查您何时点击警报即将到来的链接
加载页面时收到空白警报。链接未激活。但是当我按下 index.php 时，它会变为活动状态并且我会收到警报：index.php

【解决方案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 */
}

【讨论】：