この記事の例は、参照用のJSタブの切り替えの効果を共有しています。特定のコンテンツは次のとおりです
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> tab </title> <style> *{margin:0;パディング:0;リストスタイル:なし;} .box {width:1000px;オーバーフロー:隠し;マージン:100px auto 0px; } #title {line-height:40px;背景色:RGB(247,247,247);フォントサイズ:16px; font-weight:bold;色:RGB(102,102,102);オーバーフロー:隠し; } #title span {float:left;幅:166px;テキストアライグ:センター; } #titleスパン:Hover { /*color:black;* / cursor:pointer; } #content {マージントップ:20px; } #content li {width:1050px;オーバーフロー:隠し;表示:なし;背景色:RGB(247,247,247); } #content li div {width:156px;マージン右:14px;フロート:左;テキストアライグ:センター; } #content li div a {font-size:14px;色:黒;ラインハイト:14px; /* float:left;*/ display:inline-block;マージントップ:10px; } #content li a:hover {color:#b70606; } #content li div span {font-size:16px;ラインハイト:16px; /*float:left;*/ display:block;色:RGB(102,102,102);マージントップ:10px; } #content img {float:left;幅:155px;高さ:250px; } #title .select {background-color:rgb(10,167,112);色:白; } #content .show {display:block; } </style> </head> <body> <div> <p id = "title"> <span>ハンサム</span> <span> Beauty </span> <span> pet </span> <span>ムービー</span> <span> legaing of Legends </span> <span>音楽</span> </p> <ul id = "content"> <img = <img = "/<img href = "#"> Jason Statham </a> <Span>レアとクール</span> </div> <div> <img src = "images/shuaige2.jpg"> <a href = "#"> jason statham </a> <スパン>珍しい</span> href = "#">トムクルーズ</a> <span>ハイエンド、雰囲気、ハイエンド</span> </div> <div> <img src = "images/shuaige4.jpg"> <a href = ">トムクルーズ</a> <スパン<スパン>ハイエンドおよびハイエンド</span < src = "Images/shuaige4.jpg"> <a href = "#"> Tom Cruise </a> <span>ハイエンド、雰囲気とハイエンド</span> </div> <div> <img src = "images/shuaige4.jpg"> <a href = "ハイエンド</span> </div> <div> <img src = "images/shuaige4.jpg"> <a href = "#"> <span>ハイエンド、雰囲気、ハイエンド</span> </div> <div> <img src = "画像/shuaige4.jpg"> <クルーズ</a> <span>ハイエンド、雰囲気とハイエンド</span> </div> <div> <img src = "simase/shuaige5.jpg"> <a href = "#"> <span> low-key luxuryには含み</span </div> <img src = "> <img src ="> <img src = "> <img src ="> href = "#"> juan fu </a> <span> low-key Luxuryには意味合いがあります</span> </div> </li> <li> <div> <img src = "images/meinv1.jpg"> < src = "images/meinv2.jpg"> <a href = "#"> beauty </a> <span> furious and furious and soft inside </span> </div> <div> <img src = "images/meinv3.jpg"> <a href = "#"> beauty </a> <span>かわいいpouting pouting poting poting poting poting poting poting </>> src = "images/meinv4.jpg"> <a href = "#"> beauty </a> <span>かわいいふくれいなハサミ</span> </div> <div> <img src = "image/meinv5.jpg"> <a href = "#"> beauty </a> src = "Images/meinv6.jpg"> <a href = "#"> beauty </a> <span>ファッショナブル、ブライト、フレッシュ</span> </div> </li> <li> <li> <img src = "images/chongwu1.jpg"> <a href = "#" <div> <img src = "images/chongwu2.jpeg"> <a href = "#"> pets </a> <span> 666 yuan per </span> </div> <div> <img src = "images/chongwu3.jpg"> <a href = "#" <div> <img src = "images/chongwu4.jpg"> <a href = "#"> pets </a> <span> 666 yuan per </span> </div> <div> <img src = "images/chongwu5.jpg"> <a href = "#" <div> <img src = "images/chongwu6.jpg"> <a href = "#"> pets </a> <span> 666ピースあたりの666ピース</span> </div> </li> <li> <div>クラシック</span> </div> <div> <img src = "images/yingshi2.jpg"> <a href = "#"> classics in the classics </span> </div> <div> <img src = "images/yingshi2.jpg"> <a href = "崩壊</span> </div> <div> <img src = "images/yingshi3.jpg"> <a href = "#">トランスフォーマーシリーズ</a> <span>エキサイティングでエキサイティング</span> </div> <div>夢はとても新鮮です</span> </div> <div> <img src = "images/yingshi5.jpeg"> <a href = "#"> ghinchilla </span> </div> <div> <div> <img src = "images/yingshi6.jpg"> <a href = "> <a href ="> gump </a> <span> forrest gumpはまだ同じフォレストgump </a> </div> </li> <li> <li> <img src = "images/lol1.jpg"> <a href = "> ic sagittarius </a> <span> href = "#">暗闇の娘</a> </div> <div> <img src = "images/lol3.jpg"> <a href = "#"> explorer </a> <span>私はゲームで最もハンサムです</span> </div> <div> <img src = "画像/lol4.jpg"> < href = "#">スタッフ</a> <span> torno </a> <span>トルコのオールラウンダー</a> </div> <div> <img src = "images/lol5.jpg"> <a href = ">トルコの百万</a> <スパン<スパンミリオン1日。 </span> </div> <div> <img src = "images/lol6.jpg"> <a href = "#"> wewolves </a> <span>私のために拡大しないでください</span> </div> </li> <li> 。 。 </li> </ul> </div> <scrip> var title = document.getElementById( 'title'); var content = document.getElementById( 'content'); var spans = title.getElementsByTagname( 'Span'); var lis = content.getElementsByTagname( 'li'); for(var i = 0; i <spans.length; i ++){spans [i] .index = i; spans [i] .onclick = function(){for(var j = 0; j <spans.length; j ++){spans [j] .classname = ''; lis [j] .classname = ''; } this.classname = 'select'; lis [this.index] .classname = 'show'; }} </script> </body> </html>このコードの鍵は、トラバーサルとこのポインターの最後の2つです。トラバーサルの最初のものは、各スパンボタンのクリックイベントを追加することですが、トラバーサルの2番目は現在クリックされているボタンを決定することです。対応するコンテンツの部分は、外観を簡単に制御でき、隠されています。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。