导航栏的切换特效:
html代码如下:
<ul id="tab">
<li class="fli">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div id="tab_con">
<div class="fdiv">aaaa</div>
<div>bbbb</div>
<div>cccc</div>
</div>
css样式代码如下:
ul, li, div {
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 div {
width: 304px;
height: 200px;
display: none;
border: 1px #bbb solid;
border-top: none;
}
#tab_con div.fdiv {
display: block;
background-color: #ccc;
}
.tclass{
width: 100px;
height: 30px;
background: #000;
}
js代码如下:
<script type="text/javascript">
var tabs = document.getElementById("tab").getElementsByTagName("li");
var divs = document.getElementById("tab_con").getElementsByTagName("div");
for (var i = 0; i < tabs.length; i++) {
tabs[i].onclick = function () {
change(this);
}
}
function change(obj) {
for (var i = 0; i < tabs.length; i++) {
if (tabs[i] == obj) {
tabs[i].className = "fli";
divs[i].className = "fdiv";
}
else {
tabs[i].className = "";
divs[i].className = "";
}
}
}
</script>