移动子页面/其他页面时，在引导程序中保持当前导航菜单处于活动状态答案

【问题标题】：Stay current nav menu active in bootstrap when move sub page/ other page移动子页面/其他页面时，在引导程序中保持当前导航菜单处于活动状态
【发布时间】：2016-02-11 18:33:32
【问题描述】：

当访问子页面/其他页面时，我想让菜单导航在 boostrap 中保持活动状态。

这是我在标题菜单上的代码：

    function echoActiveClassIfRequestMatches($requestUri)
     {
       $current_file_name = basename($_SERVER['REQUEST_URI'], ".php");

       if ($current_file_name == $requestUri)
         echo 'class="active"';
    }

>首页

此功能仅在我们访问父页面时才有效。如果想要访问子页面，导航菜单不会保持活动状态。例如：如果我们访问 index.php，导航菜单是活动的，但如果我们从 index.php 访问子页面，导航菜单没有活动。当我们访问子页面时如何激活导航菜单？非常感谢您的回答..

【问题讨论】：

标签： php css twitter-bootstrap

【解决方案1】：

简单的答案是你可以使用

$_SERVER['SCRIPT_NAME']

而不是

$_SERVER['REQUEST_URI']

更长的答案是你从你的函数中处理多个事情，这将阻止你重用你的代码。

请参考以下建议：

<?php
  /**
   * checks if the user called a certain script
   */
  function requestMatches($script_name)
  {
    return (basename($_SERVER['SCRIPT_NAME'], '.php') == $script_name);
  }

  /**
   * identifies the class for a given request 
   */
  function getClassForRequest($script_name)
  {
    return requestMatches($script_name) ? 'active' : '';
  }
?>

<ul class="nav navbar-nav navbar-left">
  <li class="<?=getClassForRequest('table')?>">
    <a href="table.php">Table <span class="sr-only">(current)</span></a>
  </li>
  <li class="<?=getClassForRequest("index")?>">
    <a href="index.php">home <span class="sr-only">(current)</span></a>
  </li>
</ul>

通过将您的逻辑分离到单独的函数中，您现在可以轻松解决多种情况，如果情况如此的话。请注意，不需要从函数体中回显，因为 <?= ?> 已经为您完成了。

最后，我要补充一点，这件事应该完全在客户端处理。这是一个使用 jQuery 的示例。

<ul class="nav navbar-nav navbar-left" id="custom_menu">
  <li>
    <a href="table.php">Table <span class="sr-only">(current)</span></a>
  </li>
  <li>
    <a href="index.php">home <span class="sr-only">(current)</span></a>
  </li>
</ul>

<script>
$(function() {
    var path = window.location.pathname;
    var item = path.split('/').pop();
    var element = $('#custom_menu a[href="' + item + '"]');
    if (element.length == 0) {
        // no elements match the current request uri
        return false;
    }
    element.parent().addClass('active');
});
</script>

【讨论】：

非常感谢您的回复..我会试试这个..谢谢
请告诉我您选择了哪种方法，以便我更详细地解释
谢谢，我专注于使用 Jquery。我的 php 文件结构是：app/table.php（作为主页）和 app/table_edit.php（作为子页面）。所有文件位于一个文件夹中。如果我使用上述解决方案，它只会在主页中设置活动类。
在var path = window.location.pathname; 之后添加console.log(path); 以确保您识别正确的uri。另外，请执行console.log(item); 以确保您识别正确的脚本名称。这应该与您的 a href 属性完全匹配。如果您需要更多详细信息，请告诉我
好的..谢谢博格丹先生...非常有帮助

【解决方案2】：

最后，我正在使用此代码来解决我的问题。

function echoActiveClassIfRequestMatches($requestUri)
     {
       $current_file_name = basename($_SERVER['REQUEST_URI'], ".php");

       if ($current_file_name == $requestUri)
         echo 'class="active"';
    }

<!-- menu fuction -->
<ul class="nav navbar-nav navbar-left">
<li id="home" <?=echoActiveClassIfRequestMatches("index")?>><a href="index.php">HOME <span class="sr-only">(current)</span></a></li>
</ul>

<!-- add jquery in each sub page -->

<script src="jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#home').addClass('active');
         // other menu
        //$('#table').addClass('active');
    });
</script>

谢谢..

【讨论】：