Question

我的页面中有一个boostrap导航栏，我放在另一个文件nav01.php中的内部内容，因为我曾经经常更改它并希望将它放在一个单独的单个文件中。问题是，我希望所有页面都有相同的文件，但我想在导航栏中将当前页面标记为活动状态。

当我在每个页面中都有导航条代码时，它可以工作，但是一旦我将它移动到一个seaparate文件，并使用jquery加载方法将其读入每个页面，它就无法正常工作。该文件加载良好，但我用于将当前页面标记为活动的代码不再起作用，不执行任何操作。

这是导航栏中的内容nav01.php：

 <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>                        
        </button>
        <a class="navbar-brand" href='home.php'><span class="glyphicon glyphicon-home"></span></a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
<li><a href='documentation.php'>Documentation</a></li>
<li><a href='admin.php'>Admin</a></li>
<li><a href='login.php'>Login</a></li>
        </ul>
    </div>
    </div>

这是在移动到新文件之前工作的脚本：

<script type="text/javascript">
  $(document).ready(function () {
  $("li a[href='" + location.href.substring(location.href.lastIndexOf("h/") + 1, 255) + "']").parent().addClass("active");
});
</script>

这是我用来将nav01.php写入每个其他php页面的加载调用：

$(document).ready(function(){
  $("#nav01").load("nav01.php"); 
});

只需在script / script.js中加载调用

php文件只有带有id的导航，我的脚本在底部加载：

<nav class="navbar navbar-inverse" id="nav01"></nav>
<script src="script/script.js"></script>

如果我理解它，问题是，我正在尝试在php页面中使用jQuery代码，客户端，服务器执行然后“按原样”加载？当我加载页面时，它不能再被更改，因为代码不在那个调用的php页面中？ nav01中的脚本代码有效地获取当前位置，但是当它执行时，它在nav01页面内，所以没有页面处于活动状态，所以它什么都不做？

我一直在寻找很多答案，但没有一个在我的情况下，我无法找到解决方案，$ _SERVER ['REQUEST_URI'] php只会给我nav01.php，并且我不知道是否可以通过jQuery加载方法发送一个GET变量，其中包含将要插入导航的页面的地址。

感谢。

Answer 1

当DOM内容准备就绪时，就绪jQuery事件仅触发一次。我建议将主动元素标记功能放在加载功能的回调中，如：

$("#nav01").load("nav01.php", function() {
    $("li a[href='" + location.href.substring(location.href.lastIndexOf("h/") + 1, 255) + "']").parent().addClass("active");
});

jQuery加载方法和Boostrap导航栏处于活动状态

1 个答案: