0

我是新手，所以我需要你的帮助，我的标题中有一个导航菜单。当页面处于活动状态时，其选项卡有一个名为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
  }

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

4

3 回答 3

1

你确定 $_SERVER['PHP_SELF']; 足以检查网址吗？

我认为你必须使用这个：

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

来源

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

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

于 2013-11-04T10:05:18.333 回答
0

$_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 。

于 2013-11-04T10:03:24.773 回答
0

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

使用 PHP 的 CSS 导航包括

于 2014-01-05T16:17:49.953 回答