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

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -