Question

我想在用户浏览页面时突出显示/激活我的网站菜单，但下面的代码不起作用。

有人可以检查出现了什么问题吗？感谢。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<script type="text/javascript">
$(function(){
// this will get the full URL at the address bar
var url = window.location.href; 

// passes on every "a" tag 
$("#nav_main a").each(function() {
    // checks if its the same on the address bar
    if(url == (this.href)) { 
        $(this).closest("li").addClass("active");
    }
});
});
</script>

<style type="text/css">
.active{
color:#f93;
}
</style>

<div id="nav_main">
<ul>
    <li><a href="index.php">Home</a></li>
    <li><a href="aboutFrontend.php">About</a></li>
    <li><a href="subscribeFrontend.php">Subscribe</a></li>
    <li><a href="newsFrontend.php">News</a></li>
    <li><a href="magFrontend.php">Mag</a></li>
    <li><a href="contactFrontend.php">Contact</a></li>
</ul>
</div>

Answer 1

这也应该有效：

<script>
$(document).ready(function(){
    var url = (window.location.href).split("/").pop();
    $('#nav_main a[href="'+url+'"]').addClass('active');
});
</script>

Answer 2

window.location.url将提供类似http://zyx.com/<your-page>的绝对网址，因此您的平等条件将失败。您需要使用基于正则表达式的解决方案替换相等测试，该解决方案将测试位置路径是否以菜单项的href之一结束。

您需要更改

 if(url == (this.href)) {

到

if(new RegExp('/' + this.href + '^').test(url)) {

Answer 3

好吧，我已经尝试了你的例子，它为我工作。如果我将一个链接的URL保留为空白，则它会输入条件并应用该样式。因此，我建议您提醒网址，看看您是否收到了正确的网址。

您在JSFiddle的代码：Working Code

<div id="nav_main">
<ul>
    <li><a href="">Home</a></li>
    <li><a href="aboutFrontend.php">About</a></li>
    <li><a href="subscribeFrontend.php">Subscribe</a></li>
    <li><a href="newsFrontend.php">News</a></li>
    <li><a href="magFrontend.php">Mag</a></li>
    <li><a href="contactFrontend.php">Contact</a></li>
</ul>

我只保留一个链接空白。所以请检查网址。

我也尝试离线代码。如果网址正确，则可以正常工作。

Answer 4

这比接受的答案要好得多：

$(document).ready(function () {
    $page = window.location.href;

    if (!$page) {
      $page = 'index.html';
    }

    $('.mainNav  li a').each(function () {

      var $href = this.href;

      if (($href == $page) || ($href == '')) {
        $(this).parent().addClass('active');
      } else {
        $(this).parent().removeClass('active');
      }

    });
    return false;

  });

Answer 5

您的代码无效的原因是 var url = window.location.href 会返回完整的网址链接，例如 http://localhost/yousite/aboutFrontend.php 然后您正试图与 aboutFrontend.php 相匹配所以你这样做：

if('http://localhost/yousite/aboutFrontend.php' === 'aboutFrontend.php') { 
     //!!This will not give you a match!!
   }

要使其正常工作，请使用链接上的完整网址，例如

a href =“http：//localhost/yousite/aboutFrontend.php”

最后做这样的事情，它会起作用

       //Get the current page link
       current_page_link = document.location.href;

       //Search your menu for a linkURL that is similar to the active pageURL
       $(".navbar-nav a").each(function(){
           var link_loop = $(this).attr("href");
           if(link_loop === current_page_link){
               var found_url = $(this).attr("href");
               $('.navbar-nav a[href="'+found_url+'"]').addClass('active');
           }
       });

Jquery突出显示活动菜单

5 个答案: