この記事の例は、参照のJSタブの切り替え効果の特定の実装コードを共有しています。特定のコンテンツは次のとおりです
<！doctype html> <html> <head> <meta charset = "gb2312"/> <title> zhu zhu made </title> <script src = "js/jquery.js" type = "text/javascript"> </script> <style> *{magrat：0;パディング：0; } body {background-color：#fff;フォントファミリー：「Microsoft Yahei」;フォントサイズ：18px;幅：1000px;マージン：50px Auto;色：＃000000; } .wrapper {width：350px; } #nav ul {border-bottom：2px solid yellowgreen;高さ：32px; } #nav li {display：inline-block;国境：2pxソリッド＃999;国境圏：なし;マージン左：10px;幅：65px;テキストアライグ：センター; Line-Height：30px; } #nav li：hover {cursor：pointer; } #content {display：block;ボーダー：1pxソリッドブルー;ボーダートップ：なし;テキストアライグ：センター;高さ：100px;ラインハイト：100px; } #nav li.on {border-bottom：solid 2px #ffffff; } .hide {display：none; } .show {display：block; } </style> </head> <script type = "text/javascript"> /* window.onload=change; // JSコード実装関数Change（）{this.nav = document.getElementById（ "nav"）; this.li = nav.getelementsbytagname（ "li"）; this.cont = document.getElementById（ "content"）; this.divi = cont.getelementsbytagname（ "div"）; for（var i = 0; i <li.length; i ++）{li [i] .index = i; li [i] .onclick = function（）{for（var i = 0; i <li.length; i ++）{li [i] .classname = ""; divi [i] .classname = "hide"; } li [this.index] .classname = "on"; divi [this.index] .classname = "show"; }}}*/$（function（）{$（ '＃nav li'）。各（function（）。 div "）。eq（$（this）.index（））。addclass（" show "）。siblings（）。 id = "content"> <div> content1 </div> <div> content2 </div> <div> content3 </div> <div> content4 </div> </div> </div> </div> </body> </html>上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。