html/css/php 选中导航答案

【问题标题】：Html/css/php selected navigationhtml/css/php 选中导航
【发布时间】：2013-11-04 09:52:37
【问题描述】：

我是新手，所以我需要您的帮助，我的标题中有一个导航菜单。当页面处于活动状态时，其选项卡有一个名为 menu_active 的特殊 ID。我在我的页面中包含这个 header.php 以减少冗余。

这是我迄今为止尝试过的：

    <nav>
        <ul id="menu">

            <?php 
                $pages = array( 'index.php' => 'Home', 'services.php' => 'Services', 'sitemap.php' => 'Calculators', 'about.php' => 'About'
                , 'contact.php' => 'Contact' );

                foreach( $pages as $url => $title ) {
                   $li = '<li ';
                   if( $url == 'index.php' ) {
                       $li .= 'class="alpha"';
                   } else if ( $url == 'contact.php' ){
                       $li .= 'class="omega"';
                   }

                   if( $_SERVER[ 'PHP_SELF' ] == $url ) {
                       $li .= 'id="menu_active"';
                   }
                   $li .= '><a href="' . $url . '"><span><span>' . $title . '</span></span></a></li>';
                   echo $li;
                }
            ?>

        </ul>
    </nav>

更新： *CSS*

      #menu {
width:100%;
overflow:hidden;
margin-top:3px
    }
    #menu li {
float:left
    }
    #menu a {
display:block;
font-size: 18px;
font-weight:400;
color:#000;
background:url(../images/menu.gif) top repeat-x;
line-height:55px;
text-decoration:none;
  }
  #menu li span {
display:block;
background:url(../images/menu_left.gif) top left no-repeat
  }
  #menu .alpha span {
background:url(../images/left_menu.gif) top left no-repeat
  }
  #menu .alpha a:hover span, #menu .alpha#menu_active a span {
background:url(../images/left_menu_active.gif) top left no-repeat
  }
  #menu .omega span span {
background:url(../images/right_menu.gif) top right no-repeat
  }
  #menu .omega a:hover span span, #menu .omega#menu_active a span span {
background:url(../images/right_menu_active.gif) top right no-repeat
  }
  #menu li span span, #menu .alpha span span {
background:url(../images/menu_right.gif) top right no-repeat;
padding:0 60px
  }
  #menu a:hover, #menu #menu_active a {
color:#fff;
background:url(../images/menu_active.gif) top repeat-x
  }
  #menu a:hover span, #menu #menu_active a span {
background:url(../images/menu_left_active.gif) top left no-repeat
  }
  #menu a:hover span span, #menu #menu_active a span span, #menu .alpha#menu_active a span span, #menu .alpha a:hover span span {
background:url(../images/menu_right_active.gif) top right no-repeat
  }

我可以开始使用第一个和最后一个菜单，但活动状态仍然无济于事。这里似乎有什么问题？您能帮忙看看最佳做法是什么？

【问题讨论】：

你能告诉我们你的css代码吗？显示html也不错，可能你也有问题
@aspirinemaga 我已经添加了我的css，请看一下。

标签： php html css

【解决方案1】：

你确定 $_SERVER['PHP_SELF'];检查网址就够了吗？

我认为你必须使用这个：

$query = $_SERVER['PHP_SELF'];
$path = pathinfo( $query );
$what_you_want = $path['basename'];

Source

而且不要用“==”来比较，用“===”比较好。

我认为您也必须检查 class 和 id 之间的空白空间。查看 Firebug 或 Chrome 开发者工具以检查生成的 HTML 代码？

【讨论】：

id="menu_active" 未包含在当前页面中。我检查了源代码。
嘿，当我尝试添加上面的代码时，它现在可以工作了！谢谢一群朋友！
很高兴我能帮上忙！祝你好运:) 顺便说一句。如果您有这样的问题，只需尝试打印出变量并检查它们的值，例如在 HTML 中。找到解决方案的最快方法。干杯。

【解决方案2】：

$_SERVER["PHP_SELF"] 不仅包含正在执行的 PHP 文件的名称，还包含其相对于文档根目录的路径（参见 http://php.net/manual/en/reserved.variables.server.php）。

使用 basename 函数从 PHP_SELF 中提取文件名：

if(basename($_SERVER["PHP_SELF"]) == $url)
{
    $li .= 'id="menu_active"';
}

更多详情请见http://php.net/manual/en/function.basename.php。

【讨论】：

源码中是否出现过？然后是客户端的问题。否则，这是您的 PHP 代码的问题。 $_SERVER["PHP_SELF"] 的确切值是多少？还有basename($_SERVER["PHP_SELF"])？你在哪个页面上测试你的代码应该有 menu_active 类？
我正在测试我的 index.php，它是当前页面，但没有任何变化。当我查看源代码时，没有包含 id='menu_active'。

【解决方案3】：

如果它是我认为你的意思，我只是有同样的问题。我能够解决它。

CSS navigation with PHP include

【讨论】：