html - Bootstrap Tabbable Issue -
i have html page b.html tab navigation. made tabs tabbable in html page below.
<div class="tabbable"> <ul class="nav nav-tabs"> <li class="active"><a href="#tab1" data-toggle="tab">section 1</a></li> <li><a href="#tab2" data-toggle="tab">section 2</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab1"> <p>i'm in section 1.</p> </div> <div class="tab-pane" id="tab2"> <p>howdy, i'm in section 2.</p> </div> </div> </div>
i have html page a.html. in a.html page, there 2 a tags
t1 , t2. when click t1, need redirect b.html , show content own tab 1 , when click t2, need redirect b.html , show content own tab 2.
i have tried below.
<a href="http://www.abc.com/b.html#tab1">t1</a> <a href="http://www.abc.com/b.html#tab2">t2</a>
but not worked. select tab1. how can solve ?
you can make use of javascript/jquery this, read hash value , open desired tab:
markup:
<div class="tabbable"> <ul class="nav nav-tabs" id='my_tab'> <li class="active"><a href="#tab1" data-toggle="tab">section 1</a></li> <li><a href="#tab2" data-toggle="tab">section 2</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab1"> <p>i'm in section 1.</p> </div> <div class="tab-pane" id="tab2"> <p>howdy, i'm in section 2.</p> </div> </div> </div>
jquery:
var tabs = $("#my_tab"); if (window.location.hash === '#tab1') { $('#my_tab a:first').tab('show'); } else if(window.location.hash === '#tab2') { $('#my_tab a:last').tab('show'); }
the above general code, can optimize per need.
Comments
Post a Comment