html5实现tab切换效果代码,HTML5实现Tab切换（通过js代码）

这篇文章给大家介绍的内容是关于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=""

} } }

相关文章推荐：

HTML5属性：margin属性的用法实例

HTML5中div标签的实例代码

HTML5属性：form表单属性的用法实例