nav-tabs with dropdown-menu in bootstrap -


i'm trying build sample using bootstrap. issue nav-tabs in want have working dropdown menu , switch between. here nav-tabs names:| city 1 | citys 2 | city 3 / each of cities has own content. lets city 2 has drop down menu. when press on shows 2 addresses choice. if choose address shows own content.
here html:

<ul class="nav nav-tabs nav-justified" id="mytab">     <li class="active"><a href="#city1" data-toggle="tab">city1</a></li>     <li class="dropdown">     <a class="dropdown-toggle" data-toggle="dropdown" href="#city2">city2 <span class="caret"></span></a>         <ul class="dropdown-menu">             <li><a href="#address1">address1</a></li>             <li><a href="#address2">address2</a></li>         </ul>     </li>     <li><a href="#city3" data-toggle="tab">city3</a></li> </ul>  <div class="tab-content">     <div class="tab-pane active" id="city1">         <h4><i class="glyphicon glyphicon-user"></i></h4>lorem profile dolor sit amet, consectetur adipiscing elit. duis pharetra varius quam sit amet vulputate.          <p>quisque mauris augue, molestie tincidunt condimentum vitae, gravida libero. aenean sit amet felis dolor, in sagittis nisi.</p>               </div>     <div class="tab-pane" id="address1">         <h4><i class="glyphicon glyphicon-user"></i></h4>lorem profile dolor sit amet, consectetur adipiscing elit. duis pharetra varius quam sit amet vulputate.          <p>quisque mauris augue, molestie tincidunt condimentum vitae, gravida libero. aenean sit amet felis dolor, in sagittis nisi.</p>     </div>     <div class="tab-pane" id="address2">         <h4><i class="glyphicon glyphicon-user"></i></h4>lorem profile dolor sit amet, consectetur adipiscing elit. duis pharetra varius quam sit amet vulputate.                  <p>quisque mauris augue, molestie tincidunt condimentum vitae, gravida libero. aenean sit amet felis dolor, in sagittis nisi.</p>     </div>     <div class="tab-pane" id="city3">         <h4><i class="glyphicon glyphicon-cog"></i></h4>lorem settings dolor sit amet, consectetur adipiscing elit. duis pharetra varius quam sit amet vulputate.          <p>quisque mauris augue, molestie.</p> </div> 

thank in advance!

you're missing data-toggle attribute on links in dropdown.

http://jsfiddle.net/isherwood/224et

<li><a href="#address1" data-toggle="tab">address1</a></li> <li><a href="#address2" data-toggle="tab">address2</a></li> 

Comments

Popular posts from this blog

basic authentication with http post params android -

vb.net - Virtual Keyboard commands -

How to get multiresult with multicondition in Sql Server -