php 实现tab切换_如何实现tab栏的切换效果

导航栏的切换特效：

html代码如下：

• tab1
• tab2
• tab3

aaaa

bbbb

cccc

css样式代码如下：

ul, li, p {

padding: 0;

margin: 0;

}

ul li {

float: left;

width: 100px;

height: 30px;

line-height: 30px;

text-align: center;

background-color: #fff;

border: 1px #bbb solid;

border-bottom: none;

cursor: pointer;

}

ul li.fli {

background-color: #ccc;

color: red;

}

ul {

overflow: hidden;

zoom: 1;

list-style-type: none;

}

#tab_con {

width: 304px;

height: 200px;

}

#tab_con p {

width: 304px;

height: 200px;

display: none;

border