Question

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

这是标题菜单上的代码：

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

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

＆GT;首页

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

Answer 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>

Answer 2

Finnaly，我使用此代码来解决我的问题。

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>

谢谢..

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

2 个答案: