下拉列表中的选项卡-twitter bootstrap

Posted

技术标签:

【中文标题】下拉列表中的选项卡-twitter bootstrap【英文标题】:tabs inside a dropdown -twitter bootstrap 【发布时间】:2018-02-21 14:02:39 【问题描述】:

这可能吗?我打算做一个,但不知道怎么做。我正在使用引导程序。这就是我现在所拥有的一切

<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>

【问题讨论】:

是的,绝对有可能。 你能举个例子吗?我尝试将值放在那些选项卡下,使其不会出现在下拉列表内容的内部而是外部:( Twitter Bootstrap Dropdown with Tabs inside的可能重复 【参考方案1】:

听起来这就像您正在寻找的东西:

<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>

注意data-toggle="tab"href属性需要对应外部内容的ID。

希望这会有所帮助! :)

【讨论】:

嗯,好的,我会试试这个,看看我能做什么 我遇到了问题。我不知道它是否相关,但我把它放在 中并且它没有改变。 更新:它自己工作,但是当我把它放在我的 里面时,它不是 hmm

以上是关于下拉列表中的选项卡-twitter bootstrap的主要内容,如果未能解决你的问题,请参考以下文章

强制堆叠标签

Twitter 引导选项卡和 javascript 事件

标题导航栏的下拉列表不适用于页面选项卡

Bootstrap - 加载(onpress)选项卡/下拉内容

下拉列表内容怎么设置?

excel怎样添加的选项卡中含有下拉列表