-1

管理パネルを作成しています...カテゴリ別に分類したい多くのフォームがあるので、このようなことをしようとしています

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) は正常に動作しますが、2 番目 (#second-tab) は動作しません。

4

1 に答える 1

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>

デモ

Update 2018ネストされたタブは Bootstrap 4 ではサポートされていません

于 2013-05-09T16:26:36.200 に答える