Question

我正在尝试在点击时将“有效”类设置到列表导航元素上。但是，add/removeclass在加载新页面之前运行，从而将active类设置回index.php列表元素。在文档加载完毕后，document.ready函数不应该运行吗？

澄清：所有的php文件都使用相同的“navbar”元素。 php文件位于同一目录级别。

$(document).ready(function() {  

    $(".nav > li").click(function() {  
        $(".nav li").removeClass("active");
        $(this).addClass("active");
    });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Project name</a>
  </div>
  <div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-right">
      <li class="active"><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
    </ul>
  </div><!--/.nav-collapse -->
</div>
</nav>

Answer 1

您可以在包含页面名称的每个页面上添加状态变量，并在导航栏中使用该状态变量来确定哪个页面处于活动状态。考虑以下结构：

在index.php中：

<?php
$pageName = 'index'; 
// rest of template

在navbar.php中：

<?php
$menuItems = ['index', '1', '2'];
?>
<div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-right">
      <?php foreach ($menuItems as $item): ?>
          <li class="<?= $pageName == $item ? 'active' : '' ?>"><a href="<?= $item ?>"><?= $item ?></a></li>
      <?php endforeach; ?>
    </ul>
</div>

当您使用include指令时，包含文件中的所有变量将共享它们所包含的文件的范围。这样，您的导航栏就可以访问每个变量中定义的$pageName变量。单独的页面。

对于菜单项而不仅仅是字符串使用更复杂的数据结构可能会有意义，因此您可以为href和链接文本设置不同的值。

Answer 2

很难看到哪些脚本和何时加载，因为问题中没有php文件，重置活动链接，

此外document.ready不保证所有资源都被加载，只是意味着加载html文档以等待所有内容的使用onload

但是，如果您将点击功能附加到文档，您的点击功能将始终有效，请参阅片段，您可以检查并看到它正常工作：

＆＃13;

$(document).ready(function() {  

    $(document).on('click',".nav > li",function() {  
        $(".nav li").removeClass("active");
        $(this).addClass("active");
    });
    
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Project name</a>
  </div>
  <div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-right">
      <li class="active"><a href="index.php">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
    </ul>
  </div><!--/.nav-collapse -->
</div>
</nav>

＆＃13;

如何在PHP中向导航添加活动类

2 个答案: