这篇文章给大家介绍的内容是关于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代码）的详细内容。