这篇文章给大家介绍的内容是关于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实现Tab切换（通过js代码）的详细内容，更多请关注编程之家其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
