タブ型のメニューを作成する（acms tabs）

a-blog cmsでは、タブ型のメニュー表示にする設定が標準で実装されています。（v1.3.0より）

タブ表示は他に「js tabs」があります。js tabsはタブとタブパネル（タブの内容）が同じ親要素内に入っているのに対し、acms tabsはタブとタブパネルの親要素が必ずしも同じでなくてもよい、という違いがあります。

acms tabsはタブのhref属性値（#を除く）とタブパネルのid属性値が同じであれば、それぞれが違う親要素の中にあってもタブ表現が可能です。

例）js tabsの場合

---

<div class="js-tabs">
	<ul>
		<li><a href="#tabA">タブA</a></li>
		<li><a href="#tabB">タブB</a></li>
		<li><a href="#tabC">タブC</a></li>
	</ul>	
	<div id="tabA">
		<p>タブAの内容です。</p>
	</div>
	<div id="tabB">
		<p>タブBの内容です。</p>
	</div>
	<div id="tabC">
		<p>タブCの内容です。</p>
	</div>
</div>

例）acms tabsの場合

<!-- タブ側 -->
<ul class="js-acms_tabs">
  <li><a href="#tab2-1">タブ1</a></li>
  <li><a href="#tab2-2">タブ2</a></li>
  <li><a href="#tab2-3">タブ3</a></li>
</ul>
<!-- パネル側 -->
<div id="tab2-1">
	タブ1の内容
</div>
<div id="tab2-2">
	タブ2の内容
</div>
<div id="tab2-3">
	タブ3の内容
</div>

---

タブ型のメニューを作成する（acms tabs）

1. 設定の編集

この機能の設定は、/js/acms/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みのJavaScriptの設定を編集する」を参照してください。

    //----------
    // acms tabs
    acmsTabsMark     : '.js-acms_tabs',
    acmsTabsConfig   :
    {
        tabClass     : 'js-acms_tab',
        activeClass  : 'js-acms_tab-active',
        readyMark    : '.js-ready-acms_tabs'
    },
    acmsTabsArray  : [
    //    {
    //        'mark'    : '',
    //        'config'  : {}
    //    }
    ],

acmsTabsMark	ここで指定したセレクタがタブ表示になります。
acmsTabsConfig	タブのオプション設定です。 tabClass：タブに自動で付与されるクラス名 activeClass：選択状態のタブに自動で付与されるクラス名 readyMark：ここで指定したクラスをタブに付与した場合、そのタブが初期状態で選択された状態になります。（'window.document.location.hash' を指定した場合は、表示中のURLが http://example.com/tab.html#hoge の時に id="hoge"のパネルが表示状態になります。）
acmsTabsArray	配列として複数の設定を記述できます。同じページ内で複数の設定を併用したい場合などに利用します。

2. HTMLとCSSの編集

HTML

指定したクラスをHTMLに記述します。

例）acmsTabsMarkで「.js-acms_tabs」と指定した場合

タブ部分にクラス「js-acms_tabs」を付与します。

また、タブ部分のa要素のhref属性は頭に#をつけ、タブの内容部分にid名として同じ名称を付与します。

---

<ul class="js-acms_tabs">
  <li><a href="#tab2-1">タブ1</a></li>
  <li><a href="#tab2-2">タブ2</a></li>
  <li><a href="#tab2-3">タブ3</a></li>
</ul>
<div id="tab2-1">
	タブ1の内容
</div>
<div id="tab2-2">
	タブ2の内容
</div>
<div id="tab2-3">
	タブ3の内容
</div>

CSS

必要に応じてスタイルを指定します。

例）

.js-acms_tab-active {
  background-color: #CCCCCC;
}

---