Question

我有一个通过脚本

动态加载到html页面的引导程序导航栏

<script>
  $(function(){
    $("#nav-placeholder").load("menu.html");
  });      
</script>

它加载完美！我现在需要的是设置class =＆＃34; active＆＃34;

这是我的menu.html加载到我们的mision页面

<div class="container navbar-fixed-top">

<nav class="navbar navbar-default">

    <div class="navbar-header">
        <a class="navbar-brand" href="index.html">
            <img alt="Brand" src="media/35px_carinhands_logo2.png">
        </a>
        <button type="button" class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li><a href="our.html">our mision</a></li>
            <li><a href="ser.html">services</a></li>
            <li><a href="why.html">why us</a></li>
            <li><a href="fee.html">fees</a></li>
            <li><a href="faq.html">faq</a></li>
            <li><a href="contacto.html">contact us</a></li>
        </ul>
        <div class="navbar-brand">
            <a class="btn btn-social-icon btn-twitter" href="http://www.twitter.com" target="_blank"><span class="fa fa-twitter"></span></a>
            <a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com" target="_blank"><span class="fa fa-facebook"></span></a>
            <a class="btn btn-social-icon btn-instagram" href="http://www.instagram.com" target="_blank"><span class="fa fa-instagram"></span></a>

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

我想要的是当菜单加载到＆＃34; our.html＆＃34; <li><a href="our.html">our mision</a></li> li <li class="active"><a href="our.html">our mision</a></li>

这是我尝试过的：

 <!-- Navigation -->    
 <script>
  $(function(){
    $("#nav-placeholder").load("menu.html");
  });      
</script>

我将占位符添加到正文

中

<div id="nav-placeholder"></div>

然后我尝试打电话给班级

<script>
$(document).ready(function(){
  $(".navbar-default .navbar-nav > .active").find("li:nth-child(1)").addClass("active");
});</script>

Answer 1

我删除了旧答案并编辑了你的代码。我希望这有帮助。

<!-- Navigation -->    
 <script>
  $(function(){
    $("#nav-placeholder").load("menu.html", function() {
    //wait for ajax load n add active class
        //$(".navbar-default .navbar-nav > .active").find("li:nth-child(1)").addClass("active");
    $('a[href="' + decodeURIComponent(window.location.pathname.replace(/^\/|\/$/g, '')) + '"]').parent().addClass('active');
    });
  });      
</script>

Answer 2

这是有效的。

在所有页面中添加此代码（更改li子元素编号）或在正确的页面中链接.js

 <!-- Navigation -->    
 <script>
  $(function(){
    $("#nav-placeholder").load("menu.html", function() {
      $("ul.nav.navbar-nav").find("li:nth-child(1)").addClass("active");
      });
  });      
</script>

谢谢你@MustafaÇetin在海中的光线

load li class active to bootstrap nav动态加载到html页面

2 个答案: