Html/css/php 选定的导航


Html/css/php selected navigation

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

我可以开始工作第一个和最后一个菜单,但活动状态仍然无济于事。这里似乎有什么问题?你能帮忙吗?

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

我认为你必须使用它:

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

并且不要用"==

"来比较,最好用"==="。

我认为您还必须检查类和 id 之间的空白空间。看看Firebug或Chrome开发者工具,看看产生了什么HTML代码?

$_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 包含的 CSS 导航