jQueryUIでタブを表示する

求人

jQueryUIでタブを表示します。

まずjqueryとjquery-ui.min.js、jquery-ui.cssをプリロードします。

タブのオプションです。

event activate,beforeActivate,beforeLoad,load,create
collapsible 数値(0,1,2…の順で指定、0が一番左)
active true or false

1.10からselected→activeに変わっています。

以下、body部分です。

<body>
<!– コーディング部分 –>
<script type=”text/javascript”>
$(function(){
$(“#tabs”).tabs({
active:1,
collapsible:true,
activate: function(event, ui) {
console.log(ui.newPanel.context.id);
}
});
});
</script>

<!– タブヘッダー –>
<div id=”tabs”>
<ul>
<li><a href=”#1″>見出し1</a></li>
<li><a href=”#2″>見出し2</a></li>
<li><a href=”#3″>見出し3</a></li>
</ul>

<!– タブコンテンツ –>
<div id=”1″>
見出し1の内容~<br/>
見出し1の内容~<br/>
</div>
<div id=”2″>
見出し2の内容~<br/>
見出し2の内容~<br/>
</div>
<div id=”3″>
見出し3の内容~<br/>
見出し3の内容~<br/>
</div>
</div>
</body>

タブを表示するには、divでul要素内にaタグを記述した箇所を囲みます。

href属性に紐づいたdiv要素がタブ内のコンテンツになります。

DEMO

jquery.uiの詳細はこちらをどうぞ。

jQueryUIでアコーディオンを表示する

関西で140-170/80~120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
Python3.6,Djangoを勉強中です,Javaは少し飽きてしまってます–;
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくば、我に七難八苦を与えたまえ」です^^

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA