这篇文章给大家介绍的内容是关于HTML5实现Tab切换（通过js代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
- nbsp;html>
<span class="pln">javascript</span><span class="pun">实现</span><span class="typ">Tab</span><span class="pun">切换</span> *{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;}
登录后复制tab1tab2tab3
这是清华大学的校徽@@##@@
这是浙江大学的校徽@@##@@
这是华中科大的校徽@@##@@
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=""} } }
相关文章推荐：
HTML5属性：margin属性的用法实例
立即学习“前端免费学习笔记（深入）”；
HTML5属性：margin属性的用法实例
立即学习“前端免费学习笔记（深入）”；
HTML5属性：margin属性的用法实例
立即学习“前端免费学习笔记（深入）”；
以上就是HTML5实现Tab切换（通过js代码）的详细内容，更多请关注【创想鸟】其它相关文章！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
