Question

我正在制作我的管理面板...有很多表格，我想按类别分类，所以我试图做这样的事情

div.tabbable
    ul#first-tab.nav.nav-tabs
        li.active
            a(href='#datos-de-usuario',data-toggle='tab') Datos de usuarios
        li
            a(href='#datos-de-comercio',data-toggle='tab') Datos de comercio
    div.tab-content
        div#datos-de-usuario.tab-pane.active
            div.tabbable.tabs-left
                ul#second-tab.nav.nav-tabs
                    li.active
                        a(href="#formulario-nuevo-usuario") Nuevo usuario
                    li
                        a(href="#formulario-borrar-usuario") Borrar usuario
                div.tab-content
                    div#formulario-nuevo-usuario.tab-pane.active
                        h2 tab Nuevo usuario

                    div#formulario-borrar-usuario.tab-pane
                        h2 tab Borrar usuario

        div#datos-de-comercio.tab-pane
            h2 some other content in comercio

第一个标签按钮（＃first-tab）工作正常，但第二个（＃second-tab）不工作我点击并且永远不会改变任何事情。

Answer 1

您可以发布jade模板正在创建的HTML吗？

标签内容中的标签应该可以正常工作......

  <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>I'm in Section 2.</p>
        <div class="span8">
        <div class="tabbable tabs-left">
        <ul class="nav nav-tabs">
          <li class="active"><a href="#tab3" data-toggle="tab">Section 3</a></li>
          <li><a href="#tab4" data-toggle="tab">Section 4</a></li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane active" id="tab3">
            <p>I'm in Section 3.</p>
          </div>
          <div class="tab-pane" id="tab3">
            <p>I'm in Section 4.</p>
          </div>
        </div>
        </div>
      </div>      
      </div>
    </div>
  </div>

Demo

更新2018年 Bootstrap 4

中不支持嵌套标签

tabbable twitter bootstrap中的tabblable

1 个答案:

Demo