Javascript 如何使Bootstrap.nav列表隐藏和显示不同的div元素？

我刚刚使用了一个引导

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

我希望它也能做到这一点，我尝试在

.tabbable

中使用它，并在下面添加

.tabcontent

，但没有得到结果

实际上，我希望

.nav列表

及其内容位于

选项卡内容

中：

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

你好，萨沙
霍拉·阿基拉

---

我包括了这个

这在没有你自己的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>

你好，萨沙
霍拉·阿基拉
内容2
内容3
内容4
内容5
内容6

这里有另一个演示，它不那么忙（它有更少的选项卡，更干净，因为它只使用必要的类，而不是OP的附加类），以防其他人想看到它）

---

这在没有自己的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>

你好，萨沙
霍拉·阿基拉
内容2
内容3
内容4
内容5
内容6

这里有另一个演示，它不那么忙（它有更少的选项卡，更干净，因为它只使用必要的类，而不是OP的附加类），以防其他人想看到它）

---

看看下面的例子，这是我这边的一项简单工作。我希望它对您有用：

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

1.
2.
3.
4.
5.
6.
7.

看看下面的例子，这是我这边的一项简单工作。我希望它对您有用：

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

1.
2.
3.
4.
5.
6.
7.

在fiddle方面，您忘记了包含引导所需的jQuery。您没有将jQuery或Javascript作为任何标记包含在问题中。如果没有它们，解决方案是不可能的。Dome@fizzix即使我知道这都是JavaScript，这使得我自己也不想实现任何JavaScript。对不起，但这毫无意义…就像在导航选项卡中一样，我不是在编写任何JavaScript，而是在小提琴中使用引导JavaScript功能，您忘了包含引导所需的jQuery。您没有将jQuery或Javascript作为任何标记包含在问题中。如果没有它们，解决方案是不可能的。Dome@fizzix即使我知道这都是JavaScript，这使得我自己也不想实现任何JavaScript。很抱歉，但这毫无意义……就像在导航选项卡中一样，我没有编写任何JavaScript，而是使用引导JavaScript功能。谢谢，你只是简单地实现了它。我有两个主要问题：第一：何时可以在非

div

元素中使用网格系统类，何时正好在

div

s？第二名：

.content fluid

到底是做什么的？很乐意帮忙。1） 网格系统类可以在您想要的任何元素上使用。它们是浮动的，因此它们立即成为块级别。在这个场景中，我在

上使用它，因为我希望填充是该元素的一部分，而不是父元素的一部分。2） 我想你的意思是

.container fluid

，这只是使用引导行停止水平滚动条时要使用的一个类。你只是简单地摇晃了一下，谢谢。我有两个主要问题：第一：何时可以在非

div

元素中使用网格系统类，何时可以在

---

• [jquery]相关文章推荐
• Jquery 如何将数组的每个索引值应用于一组选定元素的每个值 jquery
• Jquery 如何获取元素的名称或id？？滑动分页 jquery
• Jquery 插入文本以便我可以打印（） jqueryprinting
• Ajax自动完成在第二次访问时解除绑定抛出jquery SimpleModel jqueryajax
• 为什么jQuery插件不能通过ajax动态添加元素 jquery
• 如何使用Ignore属性切换Jquery验证？ jquery
• Jquery 如何附加Google+；1个脚本 jquerygoogle-plus
• jqueryajax-成功函数 jqueryasp.netajax
• jquery关于在文本框中显示值的帮助 jquery
• Jquery 循环中每个项目[编号]的json查询 jqueryjsonloops
• jQuery语法顺序 jquery
• 什么'；错误：在jQuery中通过innerHtml键控时，无法一次性插入em或任何标记 jqueryhtmlcss
• Jquery 滚动背景，同时一个背景在几个滚动动作中保持固定 jqueryhtmlcssscroll
• Jquery 过滤器滚动在到达顶部div之前开始 jqueryscroll
• Jquery-在对话框中向动态生成的dropdownlist添加自定义验证规则 jquery
• Jquery 当到达底部时，按钮应隐藏 jqueryhtmlcss
• Jquery html5中的重播按钮 jqueryhtml
• Jquery 浏览器从哪里获取这些HTML表单字段？ jqueryhtmlforms
• 在一个jquery行中隐藏除一个匹配项外的所有匹配项（如图所示） jquery
• Jquery 隐藏选择2下拉菜单 jquery

---

• 随机文章推荐
• Sql server Perl ADO认为存储过程中的打印输出是一个错误！ sql-serverperl
• Sql server 获取MsSQL表唯一索引和主键的查询 sql-serverindexing
• Sql server 我已经打开了alterowner ON语法不起作用，我使用了Exec sp_changedbowner sa，false但我仍然有同样的问题，我也尝试将'executeas'dbo'添加到mp_SPTest中。当我这样做的时候，我得到了……”服务器主体“s sql-serversql-server-2008login
• Sql server 关于使用覆盖指数的澄清 sql-serverperformance
• Sql server 在存储过程中使用游标是否会影响性能？ sql-servertsql
• Sql server 靠近'的语法不正确+'；执行广告搜索时 sql-serversql-server-2005active-directory
• Sql server 为什么有时在merge命令中会出现错误“试图将非NULL可写列的值设置为NULL”？ sql-serversql-server-2008-r2
• Sql server 只能指定一个表达式 sql-server
• Sql server 复杂连接中的问题 sql-serversql-server-2008sql-server-2008-r2
• Sql server 多个表的外键 sql-server
• Sql server 列或固定值上的T-SQL联接 sql-servertsql
• Sql server 在XML中获取元素唯一ID的最佳方法是什么 sql-serverxml
• Sql server 如何比较SQL server中属于两个不同模式的对象的模式？ sql-servervisual-studio-2013
• Sql server sqlserver中的超级脚本数学计算 sql-servertsql
• Sql server 如何在SQL中生成没有临时表的日期范围序列 sql-serveroracle
• Sql server 从SQL问题生成XML sql-serverxmltsqlxpath
• Sql server 从给定列中获取客户年龄（以月为单位）（SQL Server 2017） sql-server
• Sql server 分组依据和列表不匹配 sql-server
• Sql server 使用Azure SQL进行跨数据库分析 sql-serverazure
• Sql server 正在尝试在SQL Server中将数字转换为bigint sql-server