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

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>

我希望它能够做同样的事情,我尝试在a中使用它.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   --> 

我包括这个小提琴

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>

演示

这是另一个不太忙的演示(它有较少的标签,更清晰,因为它只使用必要的类,而不是OP的附加类),以防其他人想看到它).

很干净的演示