CSSとjQueryを使用してタブコンテンツを非表示および表示する方法
デモ：タブをクリックしてみてください
foodshaker.comを開発するとき。 タブコンテンツを非表示および表示するマルチタブナビゲーションを作成する必要があります。 軽量のマルチタブを開発するために、jQueryとCSSを使用してそれを容易にすることにしました。
1. 説明
以下にナビゲーションの例を示します。
どのナビゲーションが表示されるかを示す必要があるため、「アクティブ」なCSSクラス名を使用して表示します。 「nav nav-tabs」は、ナビゲーションのルックアンドフィールをスタイルするために使用されます。 各ナビゲーションリンク<a>には、タブコンテンツのjQueryセレクターのターゲットがあります。
E.g. href="#tab1"、href属性の値は、jQueryオブジェクトを作成してコンテンツを表示するために使用されます。
以下はタブコンテンツの例です。
CSSクラス名「hide」は、表示をなしにスタイル設定するために使用されます。ここで、
.tab-content.hide{
display: none;
}
CSSクラス名「アクティブ」は、表示するスタイルを設定するために使用されます。
.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');
//hide displaying tab content
$(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ソースコード。
How to use CSS and jQuery to hide and show tab content
Content in tab 1