CSSとjQueryを使ってタブのコンテンツを非表示にする方法

getdocs

7年前

デモ:タブをクリックしてください

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]