Question

我刚使用了Bootstrap .nav-tabs，它实际上显示了显示/隐藏内容的标签功能：

<div class="tabbable">
    <ul class="nav nav-tabs">
        <li><a href="#tab-perfiles" data-toggle="tab">Perfiles</a></li>
        <li><a href="#tab-mallas" data-toggle="tab">Mallas</a></li>
        <li><a href="#tab-laminas" data-toggle="tab">Láminas</a></li>
        <li><a href="#tab-corrugado" data-toggle="tab">Corrugado</a></li>
        <li><a href="#tab-cables" data-toggle="tab">Cables</a></li>
        <li><a href="#tab-tecnologico" data-toggle="tab">Tecnológico</a></li>
    </ul>

    <div class="tab-content">

        <div class="tab-pane" id="tab-perfiles">

        </div>

        <div class="tab-pane" id="tab-mallas">

        </div>

    </div>
</div>

因此，点击任意标签即可显示div内的.tab-content并隐藏其余内容。

但是如何使用.nav-list？

例如，我得到了：

<ul class="nav nav-list">
    <li class="active"><a href="/">Home</a></li>
    <li><a href="#someDiv">Info</a></li>
    <li><a href="#anotherDiv">Applications</a></li>
    <li><a href="#thisOtherDiv">Profile</a></li>
    <li><a href="#lastDiv">Team</a></li>
</ul>

我希望它能够做同样的事情，我尝试在.tabbable内使用它并在下方添加.tab-content但未获得结果。

实际上我希望.nav-list及其内容位于.tab-content内：

<div class="tabbable">

    <ul class="nav nav-tabs">
        <li><a href="#tab-perfiles" data-toggle="tab">Perfiles</a></li>
        <li><a href="#tab-mallas" data-toggle="tab">Mallas</a></li>
        <li><a href="#tab-laminas" data-toggle="tab">Láminas</a></li>
        <li><a href="#tab-corrugado" data-toggle="tab">Corrugado</a></li>
        <li><a href="#tab-cables" data-toggle="tab">Cables</a></li>
        <li><a href="#tab-tecnologico" data-toggle="tab">Tecnológico</a></li>
    </ul>

    <div class="tab-content">

        <div class="tab-pane" id="tab-perfiles">
            <div class="row tab-categoria-producto">
                    <div class="col-sm-3">
                        <ul class="nav nav-list">
                            <li class="active"><a href="/">Home</a></li>
                            <li><a href="#someDiv">Sasha</a></li>
                            <li><a href="#anotherDiv">Applications</a></li>
                            <li><a href="#thisOtherDiv">Profile</a></li>
                            <li><a href="#lastDiv">Akira</a></li>
                        </ul>
                    </div>
                    <div class="col-sm-2">
                        <div id="sasha">Hola Sasha</div>
                    </div>
                    <div class="col-sm-2">
                        <div id="akira">Hola Akira</div>
                    </div>                            
            </div>
        </div>

        <div class="tab-pane" id="tab-mallas">

        </div>

        <div class="tab-pane" id="tab-laminas">

        </div>

        <div class="tab-pane" id="tab-corrugado">

        </div>

        <div class="tab-pane" id="tab-cables">

        </div>

        <div class="tab-pane" id="tab-tecnologico">

        </div>                
        <!-- Fin tab content   --> 
    </div>

</div> <!-- Fin tabbable   -->

我包含此fiddle

Answer 1

如果没有自己的JS，这是可能的。您只需要正确的结构和类名。

这是您的更正标记：

<!-- Top Tabs -->
<ul class="nav nav-tabs">
    <li class="active"><a href="#tab-perfiles" data-toggle="tab">Perfiles</a></li>
    <li><a href="#tab-mallas" data-toggle="tab">Mallas</a></li>
    <li><a href="#tab-laminas" data-toggle="tab">Láminas</a></li>
    <li><a href="#tab-corrugado" data-toggle="tab">Corrugado</a></li>
    <li><a href="#tab-cables" data-toggle="tab">Cables</a></li>
    <li><a href="#tab-tecnologico" data-toggle="tab">Tecnológico</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="tab-perfiles">
        <div class="container-fluid">
            <div class="row tab-categoria-producto">
                <!-- Tab 1 navigation -->
                <ul class="col-sm-3 nav nav-list">
                    <li class="active"><a href="#sasha" data-toggle="tab">Sasha</a></li>
                    <li><a href="#akira" data-toggle="tab">Akira</a></li>
                </ul>
                <!-- Tab 1 content -->
                <div class="col-sm-9">
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div class="tab-pane active" id="sasha">Hola Sasha</div>
                        <div class="tab-pane" id="akira">Hola Akira</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-pane" id="tab-mallas">Content 2</div>
    <div class="tab-pane" id="tab-laminas">Content 3</div>
    <div class="tab-pane" id="tab-corrugado">Content 4</div>
    <div class="tab-pane" id="tab-cables">Content 5</div>
    <div class="tab-pane" id="tab-tecnologico">Content 6</div>
    <!-- Fin tab content -->
</div>

<强> Demo

这是另一个不那么繁忙的演示（它有较少的标签和更清晰，因为它只使用必要的类，而不是OP的附加类），以防其他人想要看到它。）

<强> Nice clean demo

Answer 2

看看下面的例子，我的一个简单的努力。我希望它可能适合你：

 <div id="rootwizard">
    <ul>
        <li><a href="#tab1" data-toggle="tab">First</a></li>
        <li><a href="#tab2" data-toggle="tab">Second</a></li>
        <li><a href="#tab3" data-toggle="tab">Third</a></li>
        <li><a href="#tab4" data-toggle="tab">Forth</a></li>
        <li><a href="#tab5" data-toggle="tab">Fifth</a></li>
        <li><a href="#tab6" data-toggle="tab">Sixth</a></li>
        <li><a href="#tab7" data-toggle="tab">Seventh</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane" id="tab1">
          1
        </div>
        <div class="tab-pane" id="tab2">
          2
        </div>
        <div class="tab-pane" id="tab3">
            3
        </div>
        <div class="tab-pane" id="tab4">
            4
        </div>
        <div class="tab-pane" id="tab5">
            5
        </div>
        <div class="tab-pane" id="tab6">
            6
        </div>
        <div class="tab-pane" id="tab7">
            7
        </div>

如何使Bootstrap .nav-list隐藏并显示不同的div元素？

2 个答案: