ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5 はタブ切り替えを実装します (js コードを介して)
この記事では、HTML5 でのタブ切り替えの実装を (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 はタブ切り替えを実装します (js コードを介して)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。