用PHP和CSS制作活动按钮

I@}4]{!C,s0This tutorial will explain you how to make your button (link) in the navigation active when you are on a specific page. Example can be seeinghere.
YJ0d3Z8E1_Y
@?6U0本教程将展示如何让你的按钮（连接） 在特定的页面上起到导航作用（处于激活状态）。这里是演示的效果若鄰博客-pT3^EB0HG@*h jw8A F

4bVOe+i0Let’s begin with the layout. Create five pages:

wB/sd(t;`0让我们从布局开始，先建立5张页面：若鄰博客2u#`v&n2vi9e+w;v

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

b{Tr O0Copy 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:若鄰博客#q$G-^a!q/Rn P
复制粘贴下面的结构 - 我们仅仅建立了导航部分：

6j.C6L:_:^5@U9Dw \9w0<div id="nav">
^4{d}`}7t5G0<ul id="mainnav">
I!c4?\*Ng0<li><a href="index.php" title="Welcome page">Welcome</a></li>
@!^3X%P `8t6l0<li><a href="about_us.php" title="About us page">About us</a></li>若鄰博客.Q_f\2rk3M7Y
<li><a href="services.php" title="Services page">Services</a></li>若鄰博客t)]3rb%d
TJ
<li><a href="testimonials.php" title="Testimonials page">Testimonials</a></li>
.V*wL:F({!S0<li><a href="contact_us.php" title="Contact us page">Contact us</a></li>若鄰博客-Whs EK;P&R
</ul>
(N2^
pVc{3k0</div>若鄰博客P!@*vr0Pg

)Y$qll*D5{](t0Now let’s attach the stylesheet:
1vwS{4v}w0现在粘贴上样式表：

body {若鄰博客J:w'Yod8C%P
font-family: Arial, Helvetica, sans-serif;
5[;X0q F!F2P^O+{
z0font-size: 10pt;若鄰博客 T^B,ctQTJ
margin: 0px;若鄰博客X2YiNb6u6h%s
padding:20px 0px;若鄰博客%iU+xuh.i
text-align: center;若鄰博客#fi7Q6[)V/Pv*J
}
q Srg$@_*y0#nav {若鄰博客F ^W{?
padding: 0px;若鄰博客p#HdP4~*zW`ZR+n4o
width: 515px;若鄰博客7hm4]1Cr*XC
margin:0px auto;
oXP9DL)V0}
[`u}#w-S0#mainnav {若鄰博客{6GgVI
margin: 0px;若鄰博客HY/PH[XT
padding: 0px;若鄰博客"ml%yB@
list-style-image: none;
4@+Qp {#BQJt4@8z+Yk0list-style-type: none;若鄰博客 isEo%W`[1K"j/Go
}
F'W&X)uOJKp0#mainnav li {
o k M3dzge#Totc.K0padding: 0px;
X2MQE
R%Fl*g0float: left;若鄰博客p7M;e,n/`-s,c
margin:0px 3px 0px 0px;
/BLU&g WX0}若鄰博客 b8[,j*o)sr
#mainnav li a:link, #mainnav li a:visited, #mainnav li a:active {
)S)oS0M
a;ZV0color: #333;若鄰博客.U8MR8Dgb q*tf
text-decoration: none;若鄰博客bB{)pqDu'd%d
margin: 0px;若鄰博客-Up$p_.\~
display: block;
(~Si.y#Gfk0float: left;
a ]q1Q D3s,g!K0border-bottom:solid 5px #dadada;
a&Y(@R6JZ+N |0padding: 0px;
W3R"b&zk ^'R^f0width: 100px;若鄰博客-v6\Ps7l0ki ~x*AL
height: 20px;若鄰博客plT@
v:t
text-align: center;若鄰博客 U:C` w;lC2NUw)c
}
8s*ZB cIEj o0#mainnav li a:hover {若鄰博客f1s9GT#f+V-p
text-decoration: none;
n _1N:o@,@ur0border-bottom:solid 5px #333;若鄰博客5YA
yH vSq
}
l:aSoJ&j!X ?0#mainnav li a.active:link, #mainnav li a.active:visited, #mainnav li a.active:active, #mainnav li a.active:hover {若鄰博客/M1c7~7G:_
text-decoration: none;若鄰博客[9mX)x+JX
border-bottom:solid 5px #990000;
DiZ:ftGR0}

Stylesheet simply formats our navigation giving it the bottom border of5px.若鄰博客eR4VqcG?[N(mtj
Also onhoverthe border changes colour and when the button (link) is active we are applying aclass=”active”.
D!^eWS%v^0样式表简单的定义了我们导航的格局，给了一个底部边框，宽度为5px。还为hover状态加上了改变后的边框颜色，以及在按钮（连接）在激活后加上一个class=”active”。

Prietty straight forward.
%te3H7HAUd0Now at the top of each page, before any html or DOCTYPE definitions type the following:若鄰博客i p.jn+d
漂亮直截了当。若鄰博客Q Z,`i Nn9T5MX
现在每个页面的顶部都加上：若鄰博客bP(q7Tb3`9s
<?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$pagevariable.
(n1xG5U$u:Z B4c0这部分PHP代码可以取得当前浏览页面的名称（比如:index.php） 并将名称赋予变量$page。

In the navigation, aftertitlein theindex.phplink add the following:
+x:j(XsLO1b+v2j0在导航代码部分，在index.php连接的title后面加上：若鄰博客E'f6hGB7D6f
<?php if ($page == 'index.php') { ?>class="active"<?php } ?>若鄰博客FUrlE

a oLM`$E+{1cBs0Do 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:
y|m&t2]-E1WS0同样的方法在为每张页面导航中的相应连接里加上相应的代码。代码最后将会类似这样：若鄰博客!`'Zws ?$i!q

<div id="nav">
MzS6A+U'B.m,{:Z-Ee0Q0<ul id="mainnav">若鄰博客,v4?U*@.A6N
<li><a href="index.php" title="Welcome page" <?php if ($page == 'index.php') { ?>class="active"<?php } ?>>Welcome</a></li>
1o|2HNA4i*l0<li><a href="about_us.php" title="About us page" <?php if ($page == 'about_us.php') { ?>class="active"<?php } ?>>About us</a></li>
^4M4aT6`.le,q*t;Ek5C0<li><a href="services.php" title="Services page" <?php if ($page == 'services.php') { ?>class="active"<?php } ?>>Services</a></li>
k+ZjO)t f7Y0<li><a href="testimonials.php" title="Testimonials page" <?php if ($page == 'testimonials.php') { ?>class="active"<?php } ?>>Testimonials</a></li>若鄰博客1X`2A5}A$gS"rR
<li><a href="contact_us.php" title="Contact us page" <?php if ($page == 'contact_us.php') { ?>class="active"<?php } ?>>Contact us</a></li>
#_G3@lfbx3h0</ul>若鄰博客
KT6Rn;K"b
</div>

What this code does is it checks if variable$pageis the same as the name of the link and if so it applyesclass=”active”to it what changes the look of the link indicating that it’s the one related to the currently viewed page.若鄰博客FXNT*iv7S!lv]:Uq#e
代码所做的就是监场当前页的变量$page是否跟当前页名相同，相同则为当前页面的连接加上class=”active”，以此来改变其样式。若鄰博客4~-L#FH P g!m[&yEW;aQ2}