HTML5实现Tab切换(通过js代码)
这篇文章给大家介绍的内容是关于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="/Uploads/images/01.jpg"></p> <p>这是浙江大学的校徽<img src="/Uploads/images/02.jpg"></p> <p>这是华中科大的校徽<img src="/Uploads/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代码)的详细内容,更多请关注其它相关文章!