CSSとjQueryを使ってタブのコンテンツを非表示にする方法
デモ:タブをクリックしてください
foodshaker.com
を開発しています。タブコンテンツを非表示にして表示するには、複数のタブナビゲーションを作成する必要があります。軽量のマルチタブを開発するために、jQueryとCSSを使用してそれを容易にすることに決めました。
1.説明
以下はナビゲーションの例です:
<div> <ul class="nav nav-tabs"> <li class="active"> <a href="#tab1">Show Tab 1</a> </li> <li> <a href="#tab2">Show Tab 2</a> </li> <li> <a href="#tab3">Show Tab 3</a> </li> </ul> </div>
どのナビゲーションが表示されているかを示す必要があります。したがって、私はそれを表現するために「アクティブな」CSSクラス名を使用します。 「nav nav-tabs」は、ナビゲーションのルック・アンド・フィールをスタイルするために使用されます。各ナビゲーションリンク `<a>`は、タブコンテンツjQueryセレクタのターゲットを持っています。
例えば。
href ="#tab1 "
、href属性の値は、jQueryオブジェクトの作成とコンテンツの表示に使用されます。
以下に、タブの内容の例を示します。
<section id="tab1" class="tab-content active"> <div> Content in tab 1 </div> </section> <section id="tab2" class="tab-content hide"> <div> Content in tab 2 </div> </section> <section id="tab3" class="tab-content hide"> <div> Content in tab 3 </div> </section>
CSSクラス名 ‘hide’は、ディスプレイのスタイルをnoneにするために使用されます。
.tab-content.hide{ display: none; }
CSSクラス名 ‘active’は、表示する表示をスタイルするために使用されます。
.tab-content.active{ display: block; }
ナビゲーションのクリックイベントを容易にするために、以下のような「クリック」イベントが必要です。
$('.nav-tabs > li > a').click(function(event){ //...... logic to hide and show tab content }
まず、表示されたナビゲーションとタブのコンテンツを表示する必要があります。従って:
….//get displaying tab content jQuery selector
var active
tab
selector = $(‘.nav-tabs > li.active > a’).attr(‘href’);
$(active
tab
selector).removeClass(‘active’);
$(active
tab
selector).addClass(‘hide’);
次に、アクティブなナビゲーションを見つけて、アクティブでないものに変更しました。 ....//find actived navigation and remove 'active' css var actived__nav = $('.nav-tabs > li.active'); actived__nav.removeClass('active');
また、クリックしたナビゲーションをアクティブにするには、次のように変更する必要があります。
….//add ‘active’ css into clicked navigation
$(this).parents(‘li’).addClass(‘active’);
ターゲットタブのコンテンツを表示する:
var target
tab
selector = $(this).attr(‘href’);
$(target
tab
selector).removeClass(‘hide’);
$(target
tab
selector).addClass(‘active’);
=== 2.完全な例 CSSとjQueryを使ってタブのコンテンツを隠して表示するための完全なHTMLソースコード。
<html>
<head>
<title>How to use CSS and jQuery to hide and show tab content</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.js"></script> <script> $(document).ready(function() { $('.nav-tabs > li > a').click(function(event){ event.preventDefault();//stop browser to take action for clicked anchor
//get displaying tab content jQuery selector var active__tab__selector = $('.nav-tabs > li.active > a').attr('href');
//find actived navigation and remove 'active' css var actived__nav = $('.nav-tabs > li.active'); actived__nav.removeClass('active');
//add 'active' css into clicked navigation $(this).parents('li').addClass('active');
//hide displaying tab content $(active__tab__selector).removeClass('active'); $(active__tab__selector).addClass('hide');
//show target tab content var target__tab__selector = $(this).attr('href'); $(target__tab__selector).removeClass('hide'); $(target__tab__selector).addClass('active'); }); }); </script> <style> /** ** Start: to style navigation tab ** ** / .nav { margin-bottom: 18px; margin-left: 0; list-style: none; }
.nav > li > a { display: block; }
.nav-tabs{ ** zoom: 1; }
.nav-tabs:before, .nav-tabs:after { display: table; content: ""; }
.nav-tabs:after { clear: both; }
.nav-tabs > li { float: left; }
.nav-tabs > li > a { padding-right: 12px; padding-left: 12px; margin-right: 2px; line-height: 14px; }
.nav-tabs { border-bottom: 1px solid #ddd; }
.nav-tabs > li { margin-bottom: -1px; }
.nav-tabs > li > a { padding-top: 8px; padding-bottom: 8px; line-height: 18px; border: 1px solid transparent; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; }
.nav-tabs > li > a:hover { border-color: #eeeeee #eeeeee #dddddd; }
.nav-tabs > .active > a, .nav-tabs > .active > a:hover { color: #555555; cursor: default; background-color: #ffffff; border: 1px solid #ddd; border-bottom-color: transparent; }
li { line-height: 18px; }
.tab-content.active{ display: block; }
.tab-content.hide{ display: none; }
/** ** End: to style navigation tab ** ** / </style> </head> <body> <div> <ul class="nav nav-tabs"> <li class="active"> <a href="#tab1">Show Tab 1</a> </li> <li> <a href="#tab2">Show Tab 2</a> </li> <li> <a href="#tab3">Show Tab 3</a> </li> </ul> </div> <section id="tab1" class="tab-content active"> <div> Content in tab 1 </div> </section> <section id="tab2" class="tab-content hide"> <div> Content in tab 2 </div> </section> <section id="tab3" class="tab-content hide"> <div> Content in tab 3 </div> </section> </body> </html>
=== ソースコードをダウンロードする それをダウンロードする - link://wp-content/uploads/2012/07/How-to-use-CSS-and-jQuery-to-hide-and-show-tab-content.zip[使い方 - CSS -and-jQuery-to-hide-and-show-tab-content.zip](1 KB) link://tag/css/[css]link://tag/jquery/[jquery]link://タグ/tab/[tab]