Wordpressメモとかアフィめもとか

Wordpress,PHP,アフィリエイトとかの個人メモを記録していくよ

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

jqueryでページ内にタブ切り替え

ページ内にタブがあってタブを押すと、テキストエリアの内容が変わるっていうよくあるあれ。

こちらのページが非常に参考になりました。（下記スクリプト部分等は引用させてもらいました。）
jQuery事始めvol.3・プラグインに頼らず自分でクリックで切り替わるタブメニューを作ってみる

タブ１タブ２タブ３

タブ1の内容

タブ２を選ぶと内容が変わるやつ。

コード部分（表示させたいページのhead内に書くか、jsファイルとして呼び出す）

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">

$(document).ready(function() {
 $('.area:first').show();
 $('.tab li:first').addClass('active');
 $('.tab li').click(function() {
   $('.tab li').removeClass('active');
   $(this).addClass('active');
   $('.area').hide(); $($(this).find('a').attr('href')).fadeIn(); return false;
 });

});</script>

css部分（上と同じ）

.tab, .tab li, .tab li a {/*クリックするタブ部分*/
    float: left;
    padding:3px;
    margin-right:2px;
}

.content {/*切り替わる部分を囲うボックス*/
    clear: both;
    overflow: hidden;
    width: 300px;
    border:1px solid #eee;
    height:300px;
}
.area {/*切り替わる部分はまず全部消しておく*/
    display: none;
}
.tab li.active {/*選択中のタブ。色を変える等*/
    background: #eee;
}

.tab li.active a{/*選択中のタブのリンクカラー*/
    color:red;
}

html部分

<!--ここがタブ-->
<ul class="tab">
    <li><a href="#tab1">tab1</a></li>
    <li><a href="#tab2">tab2</a></li>
    <li><a href="#tab3">tab3</a></li>
    <li><a href="#tab4">tab4</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>

[2回]

お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード

ブログ内検索

Wordpressメモとかアフィめもとか

[PR]

jqueryでページ内にタブ切り替え

コメント