Raindrops　取扱説明書

Raindropsテーマでは、投稿でタブ形式の表示を行う事が出来ます

投稿本文に以下の形式でhtmlをテキストモードで記述してください。

javascriptなどを記述する必要はありません。

トップページでも、タブ操作が可能な便利な機能です。

<div class="raindrops-tab">
	<ul class="raindrops-tab-list clearfix">
		<li class="dummy">Tab Area</li>
	</ul>

	<div class="raindrops-tab-content clearfix ">
		<div class="raindrops-tab-page">
			<h3>日本語</h3>
			
			<p>試験</p>
		</div>
		<div class="raindrops-tab-page">
			<h3>英語</h3>
			
			<p>test</p>
		
		</div>
	</div>
</div>

タブのタイトルとして、必ず<h3>タブのタイトル</h3>要素を必ず記述してください。
この範囲に、タブコンテンツを記述してください。

Demo

WAI ARIA Role

<div class="raindrops-tab">
	<ul class="raindrops-tab-list clearfix" role="tablist">
		<li class="dummy">Tab Area</li>
	</ul>

	<div class="raindrops-tab-content clearfix ">
		<div class="raindrops-tab-page" role="tabpanel">
			<h3>日本語</h3>
			
			<p>試験</p>
		</div>
		<div class="raindrops-tab-page" role="tabpanel">
			<h3>英語</h3>
			
			<p>test</p>
		
		</div>
	</div>
</div>

タブとコンテンツの関係性を示す　aria-labelledby="hogeTab" は、未実装（1.231)