这篇文章给大家介绍的内容是关于HTML5实现Tab切换(通过js代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
javascript实现Tab切换*{padding:0px;margin:0px;}
ul li {
cursor:pointer;
float:left;
width:100px;
height:30px;
line-height:30px;
text-align:center;
background-color:#fff;
border:1px #bbb solid;
border-bottom:none;
}
ul li.fli {
background-color:#ccc;
color:red;
}
ul {
overflow:hidden;
list-style:none;
}
#tab_con {
width:304px;
height:200px;
}
#tab_con p{
width:304px;
height:200px;
display:none;
border:1px #bbb solid;
border-top:none;
text-align:center;
}
#tab_con p.fp {
display:block;
background-color:#ccc;
}
p:not(#tab_con){
padding:20px 0px;
color:blue;
}
- tab1
- tab2
- tab3
这是清华大学的校徽
这是浙江大学的校徽
这是华中科大的校徽
var tabs=document.getElementById("tab").getElementsByTagName("li");
var ps=document.getElementById("tab_con").getElementsByTagName("p");
for (var i=0;i
tabs[i].οnmοuseοver=function(){
change(this);
}}
function change(obj){
for (var i=0;i
if(tabs[i]==obj) {
tabs[i].className="fli";
ps[i].className="fp";
}
else {
tabs[i].className="";
ps[i].className=""
} } }
相关文章推荐: