jQuery

jQuery UIで縦のTabs（タブ）を実装する方法

2021年9月23日 by single コメントはまだありません

jQuery UIで縦のTabs（タブ）を実装する方法

サンプル

※このページで利用するため若干CSSを修正しています。（デモページを参照ください）

プロフィール

都内在住のフリーランスエンジニアです。
技術情報／投資／英語学習などの情報を発信していきます。




よろしくお願いいたします。

職歴

新卒で、プログラムとして就職しました。当初は正社員でした。
複数回の転職後、フリーランスエンジニアとして独立しました。
HTML/JavaScript/CSS、C#.NET、VB.NET、C++などのほかに、Oracleデーターベースなどの経験があります。

英語学習

英語学習者です。海外留学経験や滞在経験は一切ありません。
TOEICでは920点が最高です。ワタシの学習方法も共有できればと思います。

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>jQuery UI Tabs demo</title>
   <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
   <script>
   $( function() {
     $( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
     $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
   } );
   function openTab(value) {
      $( "#tabs" ).tabs( "option","active",value);
   }
   </script>
   <style>
   .ui-tabs-vertical { width: 880px; }
   .ui-tabs-vertical .ui-tabs-nav { padding: .32px .16px .32px .32px; float: left; width:  192px; }
   .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 1px !important; margin: 0 -1px .32px 0; }
   .ui-tabs-vertical .ui-tabs-nav li a { display:block; }
   .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .16px; border-right-width: 1px; }
   .ui-tabs-vertical .ui-tabs-panel { padding: 16px; float: right; width: 640px;}
   #tabs ul li { cursor: pointer;}; /* タブ領域をマウスポインターを手にする */
   </style>
</head>
<body>
<div id="tabs">
   <ul>
      <li onclick="openTab(0);"><a href="#tabs-0">プロフィール</a></li>
      <li onclick="openTab(1);"><a href="#tabs-1">職歴</a></li>
      <li onclick="openTab(2);"><a href="#tabs-2">英語学習</a></li>
   </ul>
   <div id="tabs-0">
      <h2>プロフィール</h2>
      <p> 
         都内在住のフリーランスエンジニアです。<br />
         技術情報／投資／英語学習などの情報を発信していきます。<br />
         <br /><br /><br /><br />
         よろしくお願いいたします。
      </p>
   </div>
   <div id="tabs-1">
      <h2>職歴</h2>
      <p>
         新卒で、プログラムとして就職しました。当初は正社員でした。<br />
         複数回の転職後、フリーランスエンジニアとして独立しました。<br />
         HTML/JavaScript/CSS、C#.NET、VB.NET、C++などのほかに、Oracleデーターベースなどの経験があります。
      </p>
   </div>
   <div id="tabs-2">
      <h2>英語学習</h2>
      <p>
         英語学習者です。海外留学経験や滞在経験は一切ありません。<br />
         TOEICでは920点が最高です。ワタシの学習方法も共有できればと思います。
      </p>
   </div>
</div> 
</body>
</html>

デモ

垂直タブ（縦タブ）を生成する方法

CSS設定

   <style>
   .ui-tabs-vertical { width: 880px; }
   .ui-tabs-vertical .ui-tabs-nav { padding: .32px .16px .32px .32px; float: left; width:  192px; }
   .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 1px !important; margin: 0 -1px .32px 0; }
   .ui-tabs-vertical .ui-tabs-nav li a { display:block; }
   .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .16px; border-right-width: 1px; }
   .ui-tabs-vertical .ui-tabs-panel { padding: 16px; float: right; width: 640px;}
   #tabs ul li { cursor: pointer;}; /* タブ領域をマウスポインターを手にする */
   </style>

まず、垂直用のCSSクラスを定義します。

Javascrip設定

次に定義したCSSクラスをタブに設定し、既存のクラスを削除します。

   $( function() {
     $( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
     $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
   } );

タブクリック時の処理

タブ内の文字（「A」タグ内の文字列）クリックすれば、タブは切り替わるのですが、タブ全体をクリック対象とするため、処理を加えました。

クリックイベントで処理を追加します。

<li onclick="openTab(0);">...</li>

次に呼びだされた際の処理を追加しました。

   function openTab(value) {
      $( "#tabs" ).tabs( "option","active",value);
   }

JQuery UI Tabsにはメソッドも用意されています。

オプションメソッドでは「active」を設定することで、カレントタブを変更させています。

ご参考

関連ページ