<ul class="nav nav-tabs" data-activable data-trigger=">:first-child"> <li class="active"><a href="#tab1">Tab1</a></li> <li class=""><a href="#tab2">Tab2</a></li> <li class=""><a href="#tab3">Tab3</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab1"> Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. </div> <div class="tab-pane" id="tab2"> Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. </div> <div class="tab-pane" id="tab3"> Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. </div> </div>
body { margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; line-height: 18px; color: #333333; background-color: #ffffff; } a { color: #0088cc; text-decoration: none; } a:hover { color: #005580; text-decoration: underline; outline: none; } ul { margin-bottom: 18px; margin-left: 0; list-style: none; border-bottom: 1px solid #ddd; } ul:before, ul:after { display: table; content: ""; } ul:after { clear: both; } .nav-tabs:after, .nav-pills:after { clear: both; } ul > li { float: left; margin-bottom: -1px; } ul > li > a { display: block; padding-right: 12px; padding-left: 12px; margin-right: 2px; padding-top: 8px; padding-bottom: 8px; line-height: 18px; border: 1px solid transparent; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; } ul > li > a:hover { background-color: #eeeeee; border-color: #eeeeee #eeeeee #dddddd; text-decoration: none; } ul > .active > a, ul > .active > a:hover { color: #555555; cursor: default; background-color: #ffffff; border: 1px solid #ddd; border-bottom-color: transparent; } div > div { display: none; } div > .active { display: block; }