5丁目通信(仮称)

とある5丁目で活動する還暦を過ぎたWebプログラマーの覚え書きです。それとかかってくる迷惑電話や、家業のアパート経営について。

jQuery UIのタブ内からの別タブへのリンクで手こずったけど解決した話し


jQuery UIのタブ内からの別タブへのリンクしてタブを切り替えることの書き。ツレの案件で少し手間取ったので、その覚え書き。

jQuery UIのタブが次のように書く。適当なJQueryとjQuery UIのCSSとできていることが前提。この辺りは、jQueryUIのサイトに書いてある。

<link href="css/import.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

以上のように設定してある。

JQueryUIのタブは、次のように設定する。

単純にタブ1の内容に、

タブ2を表示

と書いてもタブ1がタブ2に切り替えることができない。そこで次のように書く必要がある。

 
タブ1の内容。タブ2を表示
タブ2の内容
タブ3の内容

リンクのrel属性は、0~2がタブ1~3に対応している。

jQueryUIのバージョンによって、動きが変わっているかもしれないので注意が必要。「jQuery UI タブ リンク」でで検索した結果で、参考になりそうなサイトのコードで試してみたけど動かなかった。結局はjQueryUIのサイトからAPIのマニュアルを見て、自分で作ったのでした。

Tabs Widget | jQuery UI API Documentation

jQuery UI
技術評論社
¥1,980 (2024/02/28 15:26時点 | Amazon調べ)

ブログランキング・にほんブログ村へ 人気ブログランキング