This tutorial will explain you how to make your button (link) in the navigation active when you are on a specific page. Example can be seeing here.
本教程将展示如何让你的按钮（连接） 在特定的页面上起到导航作用（处于激活状态）。这里是演示的效果

Let’s begin with the layout. Create five pages:
让我们从布局开始，先建立5张页面：

• index.php
• about_us.php
• services.php
• testimonials.php
• contact_us.php

Copy and paste the following structure in all of them - I’m just creating navigation for our pages because that’s the only thing which we will need here:
复制粘贴下面的结构 - 我们仅仅建立了导航部分：

<div id="nav">
<ul id="mainnav">
<li><a href="index.php" title="Welcome page">Welcome</a></li>
<li><a href="about_us.php" title="About us page">About us</a></li>
<li><a href="services.php" title="Services page">Services</a></li>
<li><a href="testimonials.php" title="Testimonials page">Testimonials</a></li>
<li><a href="contact_us.php" title="Contact us page">Contact us</a></li>
</ul>
</div>

Now let’s attach the stylesheet:
现在粘贴上样式表：

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
margin: 0px;
padding:20px 0px;
text-align: center;
}
#nav {
padding: 0px;
width: 515px;
margin:0px auto;
}
#mainnav {
margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
}
#mainnav li {
padding: 0px;
float: left;
margin:0px 3px 0px 0px;
}
#mainnav li a:link, #mainnav li a:visited, #mainnav li a:active {
color: #333;
text-decoration: none;
margin: 0px;
display: block;
float: left;
border-bottom:solid 5px #dadada;
padding: 0px;
width: 100px;
height: 20px;
text-align: center;
}
#mainnav li a:hover {
text-decoration: none;
border-bottom:solid 5px #333;
}
#mainnav li a.active:link, #mainnav li a.active:visited, #mainnav li a.active:active, #mainnav li a.active:hover {
text-decoration: none;
border-bottom:solid 5px #990000;
}

Stylesheet simply formats our navigation giving it the bottom border of 5px.
Also on hover the border changes colour and when the button (link) is active we are applying a class=”active”.
样式表简单的定义了我们导航的格局，给了一个底部边框，宽度为5px。还为hover状态加上了改变后的边框颜色，以及在按钮（连接）在激活后加上一个class=”active”。

Prietty straight forward.
Now at the top of each page, before any html or DOCTYPE definitions type the following:
漂亮直截了当。
现在每个页面的顶部都加上：
<?php $page = basename($_SERVER['SCRIPT_NAME']); ?>

This piece of php code will retrieve the name of the currently viewed page (i.e. index.php) and assing it to the $page variable.
这部分PHP代码可以取得当前浏览页面的名称（比如:index.php） 并将名称赋予变量$page。

In the navigation, after title in the index.php link add the following:
在导航代码部分，在index.php连接的title后面加上：
<?php if ($page == 'index.php') { ?>class="active"<?php } ?>

Do the same for each link in the navigation replacing the ‘index.php’ with the name of the page it links to. Your code should now look like this:
同样的方法在为每张页面导航中的相应连接里加上相应的代码。代码最后将会类似这样：

<div id="nav">
<ul id="mainnav">
<li><a href="index.php" title="Welcome page" <?php if ($page == 'index.php') { ?>class="active"<?php } ?>>Welcome</a></li>
<li><a href="about_us.php" title="About us page" <?php if ($page == 'about_us.php') { ?>class="active"<?php } ?>>About us</a></li>
<li><a href="services.php" title="Services page" <?php if ($page == 'services.php') { ?>class="active"<?php } ?>>Services</a></li>
<li><a href="testimonials.php" title="Testimonials page" <?php if ($page == 'testimonials.php') { ?>class="active"<?php } ?>>Testimonials</a></li>
<li><a href="contact_us.php" title="Contact us page" <?php if ($page == 'contact_us.php') { ?>class="active"<?php } ?>>Contact us</a></li>
</ul>
</div>

What this code does is it checks if variable $page is the same as the name of the link and if so it applyes class=”active” to it what changes the look of the link indicating that it’s the one related to the currently viewed page.
代码所做的就是监场当前页的变量$page是否跟当前页名相同，相同则为当前页面的连接加上class=”active”，以此来改变其样式。

评论 (0) All

登陆 | 还没注册？