「jQuery」UIタブ(Tabs)のCSSクラスセレクタを指定する

2013年7月11日2022年2月22日

環境

jquery.min.js 3.6.0
jquery-ui.min.js 1.12.1
jquery-ui.css 1.12.1

説明
jQuery UIのTabs Widgetのリンク先
https://api.jqueryui.com/tabs/
書式
.ui-tabs .ui-tabs-nav li {処理コード}
.ui-tabs .ui-tabs-nav liは、jquery-ui.cssにあるCSSのクラスセレクタです。

使用例

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<!--CSSのクラスセレクタ -->
<style>
#cft{width:200px;}
.ui-tabs .ui-tabs-nav li{
      font-size:14px;
      background:skyblue;
}
</style>
<div id="cft">
      <ul>
            <li><a href="#tabtokyo">東京</a></li>
            <li><a href="#taboosaka">大阪</a></li>
            <li><a href="#tabfukuoka">福岡</a></li>
      </ul>
      <div id="tabtokyo">
            東京の内容
      </div>
      <div id="taboosaka">
            大阪の内容
      </div>
      <div id="tabfukuoka">
            福岡の内容
      </div>
</div>
<script>
 $(function() {
       $("#cft").tabs(
     //初期表示のタブ2「大阪」を設定する
      { active:1 });
 });
</script>

結果
タブの色は「.ui-tabs .ui-tabs-nav li」の内容が適応されます。