この記事では、JSの特定のコードを共有して、参照用の簡単なタブスイッチング効果を実装しています。特定のコンテンツは次のとおりです
JSタブの切り替えコード：
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta name = "generator" content = "editplus®"> <meta name = "著者" content = "" type = "text/css" href = "base.css" media = "all"/> <style type = "text/css"> a {color：＃a0b3d6;}。tabs {border：1px solid＃a0b3d6; margin：100px; width：300px;} A {背景：＃eaf0fd; line-height：30px; padding：0 20px; display：inline-block; border-right：1px solid＃a0b3d6; border-bottom：1px solid＃a0b3d6; float：left;}。tabs-nav .on {background：white; border-bottom：1px solid White; _ Position：relative;}。tabs-content {padding：20px; border-top：1px solid＃a0b3d6; margin-top：-1px;} </style> </head> <body> <div id = "tabs"> <h2> <a href = "javascript：; home </a href = "javascript：;">テクノロジー</a> <a href = "javascript：;"> life </a> <a href = "javascript：;"> works </a> </h2> <p>ホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホームホーム Technology Technology Technology Technology Technology Technology Technology Technology Technology Technology Technology Technology Technology</p><p>Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works作業作品の作品</p> </div> <br/> <br/> <div id = "tabs2"> <h2> <a href = "javascript：;"> 11111 </a> <a href = "javascript：;"> 22222 </a> <a href="javascript:;">33333</a></h2><p>111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111 </P> <P>22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222チ2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222221 2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222221 2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222221 2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222221 type = "text/javascript" src = "tabs.js"> </script> <script = "text/javascript"> window.onload = function（）{tabs（ 'tabs'、 'click'）; tabs（ 'tabs2'、 'mouseover'）;} </script> </html>tabs.js
関数タブ（id、トリガー）{var tabsbtn = document.getElementbyId（id）.getElementsBytagname（ 'h2'）[0] .getElementsByTagname（ 'a'）; var tabScontent = document.getElementbyId（ad）.getElementsBytagname（ 'p'）; i ++）{tabsbtn [i] .index = i; if（trigger == 'click'）{tabsbtn [i] .onclick = function（）{clearclass（）; this.classname = 'on'; showcontent（this.index）;}} else if（trigger == 'mouseover'）{tabsbtn [i] .onmouseover = function（）{clearclass（）; this.classname = 'on'; showcontent（this.index）;}}} function showcontent（n）{for（var i = 0、len = tabsbtn.length; i <len; i ++）{tabscontent [i] .classname = 'hide';} tabscontent [n]。 clearClass（）{for（var i = 0、len = tabsbtn.length; i <len; i ++）{tabsbtn [i] .classname = '';}}}}}base.css
@charset "utf-8";/*@ name：base@ function：browserのリセットデフォルトスタイル*//*ユーザー定義の背景色の影響をWebページで防止します。ユーザーがフォントをカスタマイズできるようにします*/html：htm; */body、div、dl、dt、dd、ul、li、h1、h2、h3、h4、h6、h6、pre、code、form、fieldset、legent、input、textarea、p、blockquote、th、td、hr、button、after、after、details、figcaption、futer、foter、header、hgroup、nav、bind、pad：0; beded、fike、fike、fike、要素は親フォント*/ボディー、ボタン、入力、select、textarea {font：12px simsun、tahoma、arial、sans-serif;} input、select、textarea {font-size：100％;}/*各テーブルセルのマージンを削除し、エッジのオーバーラップ*/テーブル{境界線 - bug：not-collaps：0; Text-Align*/th {Text-Align：ensexerit;}/*デフォルトの境界線を削除*/* fieldset、img {border：none;}/* ie6 7 8（q）バグはインライン表現として表示*/}/*この要素の境界線を削除します。 Style*/del {Text-Decoration：Line-Through;}アドレス、キャプション、引用、コード、DFN、EM、TH、VAR {font-Style：normal; font-weight：500;}/*リストの前に識別子を削除します。 {Text-align：left;}/* yahooから、タイトルをカスタマイズし、複数のシステムアプリケーションに適応させます*/H1、H2、H3、H4、H5、H6 {font-size：100％; font-weight：500;} q：q：after {content： '';} {font-size：75％; line-height：0; position：relative; vertical-align：baseline;} sup {top：-0.5em;} sub {bottond：-0.25em;}/*リンクディスプレイはHover状態*/a：hover {text-decoration：undercise nows edas ed ed ed ed ed ed ed ed ed ed ed ed ed ed ed ed ed ed ed ed ed ed ed ed edice defation diver defis edice defay defation difcor {Text-Decoration：none;}/*ie6,7フォーカスポイントライン削除*/a：フォーカス、*：フォーカス{outline：none;}/*clearfix：clearfix：before、clearfix：afted {content： ""; display：table;}。 /* ie6 ie7*/}。clear {clear：bloth; display：block; overflow：hidden; height：0; line-height：0; font-size：0;}/*ディスプレイと非表示、通常はjsと非表示に使用されます。 {float：left; display：inline;}。fr {float：right; display：inline;}上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。