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
- Tab Area
日本語
試験
英語
test
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)