双恒 HTML5实现Tab切换（通过js代码）
这篇文章给大家介绍的内容是关于HTML5实现Tab切换（通过js代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
<!DOCTYPE html>
<html>
<head> <meta charset=utf-8/>
<title>javascript实现Tab切换</title>
<style>
*{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;
}
</style>
</head>
<body>
<ul id=tab>
<li class=fli>tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<p id=tab_con>
<p class=fp>这是清华大学的校徽<img src=images/01.jpg></p>
<p>这是浙江大学的校徽<img src=images/02.jpg></p>
<p>这是华中科大的校徽<img src=images/03.jpg></p>
</p>
<script>
var tabs=document.getElementById(tab).getElementsByTagName(li);
var ps=document.getElementById(tab_con).getElementsByTagName(p);
for (var i=0;i<tabs.length;i++) {
tabs[i].onmouseover=function(){
change(this);
}}
function change(obj){
for (var i=0;i<tabs.length;i++){
if(tabs[i]==obj) {
tabs[i].className=fli;
ps[i].className=fp;
}
else {
tabs[i].className=;
ps[i].className=
} } }
</script>相关文章推荐：
HTML5属性：margin属性的用法实例
HTML5中div标签的实例代码
HTML5属性：form表单属性的用法实例
以上就是HTML5实现Tab切换（通过js代码）的详细内容，更多请关注双恒网络其它相关文章！
