Hatena::ブログ(Diary)

ぼくらのトークン戦争

2011-10-06 jQuery UI のタブをリンクから操作する方法

jQuery UI のタブをリンクで操作する方法


jQuery UI はとても便利ですよね。
その中でもタブ(tab)はよく使う機能の一つだと思います。

jQuery UI タブの基本記述と、
リンクをクリックするとタブ選択が変わる記述をお教えします。

まず、jQuery UI のタブを使うときの基本記述

(HTMLヘッダー部分)

<script type="text/javascript" src="./js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui-1.8.16.custom.min.js"></script>

(HTMLボディ部分)

<div id="tabs">
    <ul>
        <li>
            <a href="#tab1">タブ1</a>
        </li>
        <li>
            <a href="#tab2">タブ2</a>
        </li>
        <li>
            <a href="#tab3">タブ3</a>
        </li>
    </ul>
    <div id="tab1">
        タブ1の中身を記述
    </div>
    <div id="tab2">
        タブ2の中身を記述
    </div>
    <div id="tab3">
        タブ3の中身を記述
    </div>
</div>
<script type="text/javascript">$('#tabs').tabs();</script>

これで、通常のタブが表示されるようになりました。

次に jQuery UI のタブをリンクから操作する記述方法

(HTMLヘッダー部分に追記)

<script type="text/javascript">
    $(function() {
        $('a.tab_link').click(function() {
            $("#tabs").tabs().tabs('select', $(this).attr('href'));
            return false;
        });
    });
</script>

(HTMLボディ部分に追記)

<a href="#tab1" class="tab_link">タブ1を開く</a><br />
<a href="#tab2" class="tab_link">タブ2を開く</a><br />
<a href="#tab3" class="tab_link">タブ3を開く</a><br />

これでアンカータグのリンクをクリックするとタブが切り替わるようになります。

 
 

投稿したコメントは管理者が承認するまで公開されません。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/a1102012/20111006/1317853085
Connection: close