WCAG: Tabs w/ Tabbed Content
Tabbed Content with WCAG keyboard navigation and styling
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>