切り替えるにはタブを言えば、あなたは最初のあなたは簡単にタブを切り替えるに取得することができますjQueryの、わずか数行のコードを使用することであると思うかもしれません。
今日は使用して、共有したい 0 切り替えるにはタブを実装するためのラインJSコードを！
次のように具体的な結果は以下のとおりです。
方法の一つ：アナログラジオボタン原理
このメソッドは次のように一般的に動作します：
ユーザーは、label要素をクリックすると、単一の入力ボックスに結合した標識は、CSSセレクタを使用することにより同時に選択される適切なスタイルと相まって、選択した入力要素の後にラベルと.contentアイテムを作ります。
具体的に、どのようにそれを達成するには？読み我慢してください...
1. HTML構造
<!--HTML-->
<ul> <li> <input id="tab1" type="radio" name="tab" checked> <label for="tab1">选项一</label> <div class="content">选项一内容</div> </li> <li> <input id="tab2" type="radio" name="tab"> <label for="tab2">选项二</label> <div class="content">选项二内容</div> </li> <li> <input id="tab3" type="radio" name="tab"> <label for="tab3">选项三</label> <div class="content">选项三内容</div> </li> </ul> チェックボックスは確かに我々は同じ値に、ラジオのためのタイプ、name属性を、それを使用します。
また、以下の2点に注意してください。
①ラベルが入力をバインドする必要があり、方法があるラベルのプロパティ値の入力のための同じidので、あなたは、label要素の入力をクリックすると、ラジオボタンが選択されます
② 入力、ラベルとdivの3が連続しているが、自由に交換することはできませんオーダー（あなたが背後にある理由を知っています）
2. CSSスタイル
いいえJS、CSSは、当然、あなたは重要な役割を再生する必要がありません。
/*CSS*/
*{ margin: 0; padding: 0;} ul{ position: relative; width: 300px; margin: 100px auto;} ul li{ list-style: none;} ul li input{ display: none;} ul li label{ float: left; width: 100px; text-align: center; line-height: 30px; border: 1px solid #000; border-right: 0; box-sizing: border-box; cursor: pointer; transition: all .3s;} ul li input:checked+label{ color: #fff; background-color: #000;} ul li:last-child label{ border-right: 1px solid #000;} ul li .content{ opacity: 0; visibility:hidden; position: absolute; left: 0; top: 31px; width: 100%; height: 300px; border: 1px solid #000; box-sizing: border-box; font-size: 24px; text-align: center; line-height: 300px; color: #fff; transition: all .3s;} ul li:nth-child(1) .content{ background-color: #0f0;} ul li:nth-child(2) .content{ background-color: #00f;} ul li:nth-child(3) .content{ background-color: #f0f;} ul li input:checked~.content{ opacity: 1; visibility:visible;} ここでは、あまりにも、注意すべきいくつかの重要なポイントがあります。
①私たちは、それを表示する必要はありませんが、切り替えるためにタブのコア強度であるので、非表示にするには入力
② 「INPUT：+チェックするラベルは、」 選択したラジオボタンをマークする必要があります後にラベル要素を表し
③必要.content要素を最初にすべての隠されたの
③ 「INPUT：確認〜.contentは、」 選択したラジオボタンの.content要素を表示する必要表し
注：+隣接兄弟セレクタ、すなわち直後選択される元素を意味し;〜は、兄弟セレクタを表し、すなわち、要素次の兄弟要素のすべてを選択します
方法II ::ターゲット擬似クラス
：ターゲット擬似クラス、私は以前の記事で言及している、→突くしてくださいシングルページのWebアプリケーションの純粋なCSSの生産を
このメソッドは次のように一般的に動作します：
ユーザーが要素をクリックすると、ページのURLは、現在のアンカーに適切なリンクを追加しますクリックすると、このアプリケーションの対応.content要素は、接続IDアンカーます：ターゲット擬似クラスのスタイルを、ほかに適用された：ターゲットクラス自体.contentスタイルのアプリケーションの要素の後に擬似要素。
1. HTML構造
<!--HTML-->
<ul> <li> <div class="content" id="content1">选项一内容</div> <a href="#content1">选项一</a> </li> <li> <div class="content" id="content2">选项二内容</div> <a href="#content2">选项二</a> </li> <li> <div class="content" id="content3">选项三内容</div> <a href="#content3">选项三</a> </li> </ul> このようにHTMLの構造は、媒体として隠されたシングルボックスの使用を必要としない、比較的簡単ですが、アンカーとリンクの使用：「オプションコンテンツ」接続「オプション」との間のブリッジとしての目標
また、以下の2点に注意してください。
それと一致.contentノード兄弟ものとHREFタグ要素のそれぞれの①id属性値
②.content配列要素とラベルを変更することはできません
2. CSSスタイル
/*CSS*/
*{ margin: 0; padding: 0;} a{ text-decoration: none; color: #000;} ul{ position: relative; width: 300px; margin: 100px auto;} ul li{ list-style: none;} ul li a{ float: left; width: 100px; text-align: center; line-height: 30px; border: 1px solid #000; border-right: 0; box-sizing: border-box; cursor: pointer; transition: all .3s;} ul li:last-child a{ border-right: 1px solid #000;} ul li .content{ opacity: 0; position: absolute; left: 0; top: 31px; width: 100%; height: 300px; border: 1px solid #000; box-sizing: border-box; font-size: 24px; text-align: center; line-height: 300px; color: #fff; transition: all .3s;} ul li:nth-child(1) .content{ background-color: #0f0;} ul li:nth-child(2) .content{ background-color: #00f;} ul li:nth-child(3) .content{ background-color: #f0f;} ul li .content:target{ opacity: 1;} ul li .content:target+a{ color: #fff; background-color: #000;} ここでは、あまりにも、注意すべきいくつかの重要なポイントがあります。
① 「.content：ターゲットは、」 スタイル要素を適用し、現在の.contentへのリンクを固定します
② 「.content：+ターゲット」 すぐにスタイル要素を適用するには、現在の.content要素アンカーリンク後
この記事では概要を焦点を当てて
必要はありませんJS、切り替えるには、単純なタブを作成するために一緒にいくつかのCSSスタイルで、単一のボックスまたはアンカーリンクを使用しませ