1

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

有人可以检查发生了什么问题吗？谢谢。

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

5 回答 5

2

这也应该有效：

<script>
$(document).ready(function(){
    var url = (window.location.href).split("/").pop();
    $('#nav_main a[href="'+url+'"]').addClass('active');
});
</script>
于 2013-02-26T04:29:52.780 回答
0

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

你需要改变

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

到

if(new RegExp('/' + this.href + '^').test(url)) {
于 2013-02-26T03:43:44.673 回答
0

好吧，我已经尝试了您的示例及其对我有用。如果我将一个链接的 URL 保留为空白，那么它会输入条件并应用样式。所以我建议你提醒这些 URL，看看你是否得到了正确的 URL。

您在 JSFiddle 的代码：工作代码

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

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

我也离线尝试了您的代码。如果 URL 正确，它的工作。

于 2013-02-26T03:53:37.387 回答
0

这比公认的答案好得多：

$(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;

  });
于 2014-11-21T08:02:13.823 回答
0

您编码不起作用的原因是因为var url = window.location.href将返回一个完整的 url 链接，例如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');
           }
       });
于 2015-07-20T14:44:31.030 回答