[英]tabs inside a dropdown -twitter bootstrap
is that possible?. 那可能吗?。 i'm planning on making one but have no idea how to do it.
我正在计划制作一个,但不知道该怎么做。 i'm using bootstrap tho.
我正在使用boots tho。 this is all i have right now
这就是我现在所拥有的
<li data-toggle="dropdown"><a href="#">Vehicles</a>
<ul class="dropdown-menu nav-tabs" role="menu">
<hr/>
<li class=" active"><a data-toggle="tab" href="#cars">Cars</a></li>
<li><a data-toggle="tab" href="#vans">Vans & Pick-Up</a></li>
<li><a data-toggle="tab" href="#mpv">MPVs</a></li>
<li><a data-toggle="tab" href="#suv">Crossover & SUVs</a></li>
<li><a data-toggle="tab" href="#hybrid">Hybrid</a></li>
<li><a data-toggle="tab" href="#performance">Performance</a></li>
</ul>
It sounds like this is something like what you're looking for: 听起来这就像您要寻找的东西:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" id="menu" type="button" data-toggle="dropdown">Dropdown Example <span class="caret"></span></button> <ul class="dropdown-menu" role="menu" aria-labelledby="menu"> <li role="presentation"><a role="menuitem" tabindex="-1" data-toggle="tab" href="#menu1">HTML</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" data-toggle="tab" href="#menu2">CSS</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" data-toggle="tab" href="#menu3">JavaScript</a></li> </ul> </div> <div class="tab-content"> <div id="home" class="tab-pane fade in active"> <h3>HOME</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div id="menu1" class="tab-pane fade"> <h3>Menu 1</h3> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div id="menu2" class="tab-pane fade"> <h3>Menu 2</h3> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> </div> <div id="menu3" class="tab-pane fade"> <h3>Menu 3</h3> <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> </div> </div> </div>
Keep in mind that the href
attribute of the data-toggle="tab"
needs to correspond to the ID of external content. 请记住,
data-toggle="tab"
的href
属性需要对应于外部内容的ID。
Hope this helps! 希望这可以帮助! :)
:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.