Blog

HOME > Web > JQuery > 【jQuery】jQuery UI を使ってタブ切り替えを実装する方法

【jQuery】jQuery UI を使ってタブ切り替えを実装する方法

2017/09/15

JQuery

備忘録です。

タブ切り替えでコンテンツを表示する方法はいろいろとありますが、jQuery UIを使うと簡単に実装できます。

参考サイト
jQuery UI を使えばタブ切り替えが簡単にできる

headに記述

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

タブ切り替えのhtml

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">タブ１つめ</a></li>
    <li><a href="#tabs-2">タブ２つめ</a></li>
    <li><a href="#tabs-3">タブ３つめ</a></li>
  </ul>
  <div id="tabs-1">
    <p>１つめのタブの内容を記載します。<br />
    一番外側のdivタグできちんと囲うことがポイントです。
    </p>
  </div>
  <div id="tabs-2">
    <p>２つめのタブの内容を記載します。<br />
    タブの部分は ul タグで実装します。
    </p>
  </div>
  <div id="tabs-3">
    <p>３つめのタブの内容を記載します。<br />
    li タブ内のリンクが、各タブ内容を記述する div タグの id を指定します。<br />
    id へのリンクなので、href 属性の指定先に # を付けるのを忘れずに。
    </p>
  </div>
</div>

javascriptを記述 外部ファイルに記述してもOKです。

<script type="text/javascript">
$(function() {
    $( "#tabs" ).tabs();
});
</script>

さらにタブのクリックで表示、非表示を切り替える方法です。

参考サイト
jQueryでタブの中身を表示・非表示切り替えする

HTML
<!--ここがタブ-->
<ul class="tab">
    <li><a href="#tab1">タブ1</a></li>
    <li><a href="#tab2">タブ2</a></li>
    <li><a href="#tab3">タブ3</a></li>
    <li><a href="#tab4">タブ4</a></li>
</ul>
<!--ここが切り替わる部分-->
<div class="content">
    <div class="area" id="tab1">
            Tab1テキストテキストテキストテキスト
    </div>
    <div class="area" id="tab2">
         Tab2テキストテキストテキストテキスト
    </div>
    <div class="area" id="tab3">
            Tab3テキストテキストテキストテキスト
    </div>
    <div class="area" id="tab4">
            Tab4テキストテキストテキストテキスト
    </div>
</div>
JS
参考サイトのソースコードをちょっと変えています。
e.preventDefault()を追加して、クリック時にtab1に移動しないようにしました。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $(".tab li").on('click', function(e) {
            e.preventDefault();
            if($(this).hasClass('active')){
                $('.area').hide();
                $($(this).find('a').attr('href')).fadeOut();
                $('.tab li').removeClass('active');
            }else{
                $('.tab li').removeClass('active');
                $('.area').hide();
                $($(this).find('a').attr('href')).fadeIn();
                $(this).addClass('active');
            }
        })
    });
</script>
CSS
.tab, .tab li, .tab li a {
    float: left;
    padding:3px;
    margin-right:2px;
    list-style: none;
}
a:hover {
    opacity: 0.8;
}
.content {
    clear: both;
}
.area {
    display: none;
}

ゼヒトモ内でのプロフィール: ROCKSTREAM, ゼヒトモのホームページ作成・制作サービス, 仕事をお願いしたい依頼者と様々な「プロ」をつなぐサービス

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ