Question

我有一个导航栏，可以使用JQUERY＆＃39; .load＆＃39;

加载到我的每个页面中

但是，每个页面的活动链接会有所不同。有没有办法可以从已加载导航栏的页面覆盖活动链接？

非常感谢任何帮助：）

以下是Navbar链接的示例

  <nav class="navbar navbar-toggleable-sm">
                  <button type="button" data-toggle="collapse" data-target="#mai-navbar-collapse" aria-controls="#mai-navbar-collapse" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler hidden-md-up collapsed">
                    <div class="icon-bar"><span></span><span></span><span></span></div>
                  </button>
                  <div id="mai-navbar-collapse" class="navbar-collapse collapse mai-nav-tabs">
                    <ul class="nav navbar-nav">
                                <li class="nav-item parent open"><a href="#" role="button" aria-expanded="true" class="nav-link"><span class="icon s7-home"></span><span>Training</span></a>
                                  <ul class="mai-nav-tabs-sub mai-sub-nav nav">
                                              <li class="nav-item"><a href="/teams/Training/sitepages/training/writtenguides.aspx" id="12222" class="nav-link active"><span class="icon s7-monitor"></span><span class="name">Written Guides</span></a></li>
                                              <li class="nav-item"><a href="/teams/Training/sitepages/training/videoguides.aspx" class="nav-link"><span class="icon s7-video"></span><span class="name">Video Guides</span></a></li>            
                                  </ul>
                                </li>
                                <li class="nav-item parent"><a href="#" role="button" aria-expanded="false" class="nav-link"><span class="icon s7-users"></span><span>Support</span></a>
                                  <ul class="mai-nav-tabs-sub mai-sub-nav nav">
                                              <li class="nav-item"><a href="/teams/Training/sitepages/support/signup.aspx" class="nav-link"><span class="icon s7-id"></span><span class="name">Signing Up</span></a></li>
                                              <li class="nav-item"><a href="/teams/Training/sitepages/support/faqs.aspx" class="nav-link"><span class="icon s7-search"></span><span class="name">FAQS</span></a></li>
                                  </ul>
                                </li>

                    </ul>
                  </div>
                </nav>

JQUERY

 <script>
                    $(function(){
                      $("#nav-placeholder").load("../../navbarL1.aspx");
                        $('.dropdown-toggle').dropdown()
                    });



                    </script>

Answer 1

尝试运行此代码。我希望它能奏效。

function getURL() {
    // get the whole URL 
    var currentURL = window.location.href;

    // get the file name after = sign  
    var activeTemplate = currentURL.substr(currentURL.indexOf("=") + 1);

    // add active class to url  
    $('a[href="/teams/Training/sitepages/training/'+ activeTemplate +'"]').addClass('active');
})

Answer 2

您可以将.toggleClass()与切换状态值一起用作第二个参数。此时，需要弄清楚如何将href与当前URL进行比较。您可以使用location.pathname，但您可能希望使用href获取getAttribute，因此它不包含主机名。否则你也可以使用this.href === location.href。但是，将此代码包含在.load()的回调中非常重要，这样您就不会遇到竞争条件。

$(function(){
  $("#nav-placeholder").load("../../navbarL1.aspx", function(){
    $('.mai-sub-nav li a').each(function(){
      $(this).toggleClass('active', this.getAttribute('href') === location.pathname);
    })
  });
  $('.dropdown-toggle').dropdown()
});

Answer 3

您必须遵循这种技术才能实现

这是我的导航栏

<ul class="nav navbar-nav">
   <li class="active" data-pos="1">
      <a href="{{ route('public.site') }}">Home</a>
   </li>
   <li data-pos="2">
      <a href="{{ route('site.page',['about']) }}">About Egypt</a>
   </li>
   <li data-pos="3">
      <a href="{{ route('site.accomodation') }}">Accomodation</a>
   </li>
   <li data-pos="4">
      <a href="{{ route('site.nile_curises') }}">Nile Cruises</a>
                      `enter code here`  
   </li>
   <li data-pos="5">
     <a href="{{ route('site.tour_packages') }}">Tour Packages</a>
   </li>
   <li class="dropdown" data-pos="6">
     <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true">FAQ</span>
     </a>
     <ul class="dropdown-menu">
          <li><a href="{{ route('site.page',['thing-to-do']) }}">Thing to do</a></li>
          <li><a href="{{ route('site.page',['travel-tip']) }}">How to travel</a</li>
          <li><a href="{{ route('site.page',['travel-help']) }}">Travel Help</a></li>
     </ul>
  </li>
</ul>

这是我的脚本逻辑，其中我得到完整的URL并基于'/'分隔符溢出获取数组并检查倒数第二个和最后一个分段

var url = window.location.href; 
var urlArray = url.split("/");
var lastUrlString = urlArray[urlArray.length-1];
var pageName = urlArray[urlArray.length-2];

在获取最后一个和倒数第二个段之后，我遍历了导航栏li元素，并根据页面名称添加或删除了类

        var navLinks = $('ul.nav li');
        navLinks.each(function(index,element){

            var position = $(element).data('pos');

            if(lastUrlString == 'home')
            {
                if($(element).data("pos") == 1)
                {
                    if(!$(element).hasClass("active") )
                    {
                        $(element).addClass('active');
                    }
                }
                else
                {
                    $(element).removeClass("active");
                }
            }
            else if(lastUrlString == 'about')
            {
                if($(element).data("pos") == 2)
                {
                    if(!$(element).hasClass("active") )
                    {
                        $(element).addClass('active');
                    }
                }
                else
                {
                    $(element).removeClass("active");
                }
            }
            else if(lastUrlString == 'page' &&  pageName == 'accomodation')
            {
                if($(element).data("pos") == 3)
                {
                    if(!$(element).hasClass("active") )
                    {
                        $(element).addClass('active');
                    }
                }
                else
                {
                    $(element).removeClass("active");
                }
            }
            else if(lastUrlString == 'page' &&  pageName == 'nile_curises')
            {
                if($(element).data("pos") == 4)
                {
                    if(!$(element).hasClass("active") )
                    {
                        $(element).addClass('active');
                    }
                }
                else
                {
                    $(element).removeClass("active");
                }
            }
            else if(lastUrlString == 'page' &&  pageName == 'tour_packages')
            {
                if($(element).data("pos") == 5)
                {
                    if(!$(element).hasClass("active") )
                    {
                        $(element).addClass('active');
                    }
                }
                else
                {
                    $(element).removeClass("active");
                }
            }
            else
            {
                $(element).removeClass("active");
            }
        });

使用JQUERY Load时更改活动的导航栏链接

3 个答案: