我有template.php并且我包含navigation.php,它在单独的页面到模板中我希望当我浏览我的网站页面成为我正在使用css样式激活的页面时我想要链接到css页面为我的链接采取活动样式链接。
这是我的naviation.php页面。
<body>
<?php
$directoryURI = $_SERVER['REQUEST_URI'];
$path = parse_url($directoryURI, PHP_URL_PATH);
$components = explode('/', $path);
$first_part = $components[1];
?>
<div id="navigation">
<div class="shell">
<ul>
<li class="<?php if ($first_part=="Home") {echo "active"; } else {echo "noactive";}?>"><a href="Home.php"> <span>HOME</span></a></li>
<li class="<?php if ($first_part=="About") {echo "active"; } else {echo "noactive";}?>"><a href="About.php"> <span>ABOUT</span></a></li>
<li class="<?php if ($first_part=="services") {echo "active"; } else {echo "noactive";}?>"><a href="services.php"> <span>SERVICES</span></a></li>
<li class="<?php if ($first_part=="Products") {echo "active"; } else {echo "noactive";}?>"><a href="products.php"> <span>Products</span></a></li>
<li class="<?php if ($first_part=="clients") {echo "active"; } else {echo "noactive";}?>"><a href="clients.php"> <span>Clients</span></a></li>
<li class="<?php if ($first_part=="contacts") {echo "active"; } else {echo "noactive";}?>"><a href="contacts.php"> <span>CONTACT</span></a></li>
</ul>
</div>
这是我的CSS风格。
#navigation { background:#4073b9 url(images/navigation.gif) left top repeat-x; height:50px; }
#navigation ul { list-style:none; }
#navigation ul li { float:left; height:42px; line-height:42px;}
#navigation ul li a { float:left; height:42px; line-height:42px; color:#fff; font-size:13px; font-weight:bold; text-decoration:none; padding:0 0 0 33px; }
#navigation ul li a span { float:left; height:42px; line-height:42px; padding:0 33px 0 0; }
#navigation ul li a:hover,
#navigation ul li a.active { background:url(images/navigation-active.gif) left top no-repeat; }
#navigation ul li a:hover span,
#navigation ul li a.active span { color:#4073b9; background:url(images/navigation-active.gif) right top no-repeat; }
&#13;
<body>
<?php
$directoryURI = $_SERVER['REQUEST_URI'];
$path = parse_url($directoryURI, PHP_URL_PATH);
$components = explode('/', $path);
$first_part = $components[1];
?>
<div id="navigation">
<div class="shell">
<ul>
<li class="<?php if ($first_part=="Home") {echo "active"; } else {echo "noactive";}?>"><a href="Home.php"> <span>HOME</span></a></li>
<li class="<?php if ($first_part=="About") {echo "active"; } else {echo "noactive";}?>"><a href="About.php"> <span>ABOUT</span></a></li>
<li class="<?php if ($first_part=="services") {echo "active"; } else {echo "noactive";}?>"><a href="services.php"> <span>SERVICES</span></a></li>
<li class="<?php if ($first_part=="Products") {echo "active"; } else {echo "noactive";}?>"><a href="products.php"> <span>Products</span></a></li>
<li class="<?php if ($first_part=="clients") {echo "active"; } else {echo "noactive";}?>"><a href="clients.php"> <span>Clients</span></a></li>
<li class="<?php if ($first_part=="contacts") {echo "active"; } else {echo "noactive";}?>"><a href="contacts.php"> <span>CONTACT</span></a></li>
</ul>
</div>
</div>
</body>
&#13;
希望你能帮助我,谢谢你。
答案 0 :(得分:0)
我通常做的就是这样,它既简单又安全。
的header.php
<div id="navigation">
<ul>
<li class="<?php if ($current_page=="home") {echo "active"; }?>"><a href="home.php"><span>HOME</span></a></li>
<li class="<?php if ($current_page=="about") {echo "active"; }?>"><a href="about.php"><span>ABOUT</span></a></li>
<li class="<?php if ($current_page=="services") {echo "active"; }?>"><a href="services.php"><span>SERVICES</span></a></li>
<li class="<?php if ($current_page=="products") {echo "active"; }?>"><a href="products.php"><span>PRODUCTS</span></a></li>
<li class="<?php if ($current_page=="clients") {echo "active"; }?>"><a href="clients.php"><span>CLIENTS</span></a></li>
<li class="<?php if ($current_page=="contacts") {echo "active"; }?>"><a href="contacts.php"><span>CONTACT</span></a></li>
</ul>
</div>
index.php(home)
<?php
$current_page = 'home';
include('header.php');
?>
/*rest of your page content follows */
about.php
<?php
$current_page = 'about';
include('header.php');
?>
/*rest of your page content follows */
依旧......
并更正CSS中的这些行:
替换它:
#navigation ul li a.active { ... }
#navigation ul li a.active span { ... }
有了这个:
#navigation ul li.active a { ... }
#navigation ul li.active a span { ... }