この記事の例は、参照用の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をもっとサポートすることを願っています。