这篇文章给大家介绍的内容是关于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表单属性的用法实例
