Skip to main content

WCAG: Tabs w/ Tabbed Content

Tabbed Content with WCAG keyboard navigation and styling

text/html tabbedcontent.html — 1.1 KB

File contents

<div class="mceTmpl">
<div class="cabq-tabs">
<ul class="nav nav-tabs" role="tablist">
<li class="active" role="presentation"><a class="link-plain" href="#home" data-toggle="tab">Home</a></li>
<li role="presentation"><a class="link-plain" href="#menu1" data-toggle="tab">Menu 1</a></li>
<li role="presentation"><a class="link-plain" href="#menu2" data-toggle="tab">Menu 2</a></li>
<div class="tab-content">
<div id="home" class="tab-pane fade in active" role="tabpanel">
<p>Some content. <a href="" data-linktype="external" data-val="">link</a></p>
<div id="menu1" class="tab-pane fade" role="tabpanel">
<h3>Menu 1</h3>
<p>Some content in menu 1 and a <a href="" data-linktype="external" data-val="">link</a>.</p>
<div id="menu2" class="tab-pane fade" role="tabpanel">
<h3>Menu 2</h3>
<p>Some content in menu 2 and another <a href="" data-linktype="external" data-val="">link</a>.</p>