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>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active" role="tabpanel">
<h3>HOME</h3>
<p>Some content. <a href="https://www.google.com" data-linktype="external" data-val="https://www.google.com">link</a></p>
</div>
<div id="menu1" class="tab-pane fade" role="tabpanel">
<h3>Menu 1</h3>
<p>Some content in menu 1 and a <a href="https://www.cabq.gov/311/abq311/311-web-app" data-linktype="external" data-val="https://www.cabq.gov/311/abq311/311-web-app">link</a>.</p>
</div>
<div id="menu2" class="tab-pane fade" role="tabpanel">
<h3>Menu 2</h3>
<p>Some content in menu 2 and another <a href="http://www.blah.com" data-linktype="external" data-val="http://www.blah.com">link</a>.</p>
</div>
</div>
</div>
</div>