Question

好的，我使用此脚本更改菜单样式以突出显示当前页面。我将此脚本放在我的标题页中，将php require_once放在其他页面的标题页上。

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(function(){
  $('a').each(function() {
    if ($(this).prop('href') == window.location.href) {
      $(this).addClass('current');
    }
  });
});
</script>

我在styles.css中设置.current类。

所以一切都很好，突出显示当前的页面菜单。

唯一的问题是，每当我点击当前页面中的数据库排序或过滤等查询时，此脚本都不起作用。我认为这是因为动态地址的变化，如/page.php到/page.php?hjggj=hbhj等...

我需要解决这个问题。请注意，我不会将html和css assign class用于当前页面方法。

提前谢谢！

Answer 1

将您的功能更改为：

if ($(this).prop('href') == window.location.href.replace(/\?.*/,"")) {
      $(this).addClass('current');
}

完整代码：

$(function(){
  $('a').each(function() {
    if ($(this).attr('href') == window.location.href.replace(/\?.*/,"")) {
        $(this).addClass('current');
    }
  });
});

我认为你在比较：

"/page.php" == "/page.php?ewrfwefwef"

返回false。所以我正在做的是剥离每个查询字符串。

Answer 2

定位无序列表菜单时：在文档就绪中启动它：

$(document).ready(function(){
    $('a[href="'+window.location.pathname.split('/').pop()+'"]').parent('li').addClass('current');
});

示例菜单：

<ul class="nav">
<li><a href="index.php">Index</a></li>
<li><a href="service.php">Service</a></li>
<li><a href="portfolio.php">Portfolio</a></li>
</ul>

Answer 3

试试这个

$('#nav a').each(function(index) {
$navA = this.href.split('/')[4].split('?')[0];
$winA = String(window.location).split('/')[4].split('?')[0];
if($navA == $winA){
    $(this).addClass('current');
}

Answer 4

请尝试以下代码：

function parseUrl( url ) {
    var a = document.createElement('a');
    a.href = url;
    a.search = '';
    return a;
}
var currentLocation=parseUrl(window.location.href);
$(function(){
    $('a').each(function() {
        if (this.href == currentLocation.href) {
            $(this).addClass('current');
        }
    });
});

如何在查询页面上激活当前菜单？

4 个答案: