引导选项卡药片无法按相反顺序工作
我用 Bootstrap 4 药丸创建了一个布局。第一次点击时工作正常，第二次点击时就不起作用。假设如果我们依次单击 menu1、menu2、menu3 - 选项卡内容正在加载，而如果我再次单击 menu1 - 选项卡内容没有更改。我犯了一些错误，但我对实现这个场景有点困惑。我想要如下所示的设计。
谁能纠正我的错误，这对我有很大帮助。预先感谢，下面是我的片段，请在完整窗口中查看我的结果以检查我的布局设计
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 mb-4">
<div class="">
<div class="nav nav-pills row">
<div class="nav-item col-md-1">
<a class="nav-lin active btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu1">Menu 1</a>
</div>
<div class="nav-item col-md-1">
<a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu2">Menu 2</a>
</div>
<div class="nav-item col-md-1">
<a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu3">Menu 3</a>
</div>
<div class="nav-item col-md-1">
<a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu4">Menu4 4</a>
</div>
<div class="nav-item col-md-1">
<a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu5">Menu 5</a>
</div>
<div class="nav-item col-md-1">
<a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu6">Menu 6</a>
</div>
</div>
</div>
</div>
</div>
</div>
江户川乱折腾1回答
-
有只小跳蛙
.nav-item上面的包装器结构.nav-link仅适用于导航托管在<ul>. 如果导航是使用自定义结构创建的，则选项卡/导航/药丸需要是.nav父级的直接子级。在您的场景中，您要么必须使用重新实现它，要么需要删除您及其内部元素<ul>之间的 div 。.nav.nav-link你还有一个错字——nav-lin应该是nav-link。实际上，这不会影响您的布局，因为您已经.btn向相同的元素添加了类。这是您的代码，其中包含固定的拼写错误并删除了导航元素内的包装器 div： <div class="container-fluid"> <div class="row"> <div class="col-md-12 mb-4"> <div class=""> <div class="nav nav-pills row"> <a class="nav-link active btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu1">Menu 1</a> <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu2">Menu 2</a> <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu3">Menu 3</a> <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu4">Menu4 4</a> <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu5">Menu 5</a> <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu6">Menu 6</a> <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu7">Menu 7</a> <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu8">Menu 8</a> <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu9">Menu 9</a> <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu10">Menu 10</a> <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu11">Menu 11</a> <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu12">Menu 12</a> </div> </div> </div> </div> <div class="row"> <div class="col-md-1"> <div class="nav nav-pills"> <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu13">Menu 13</a> <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu14">Menu 14</a> <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu15">Menu 15</a> </div> </div> <div class="col-md-10"> <div class="card"> <div class="card-body"> <div class="tab-content"> <div class="tab-pane container active" id="menu1">1</div> <div class="tab-pane container fade" id="menu2">2</div> <div class="tab-pane container fade" id="menu3">3</div> <div class="tab-pane container fade" id="menu4">4</div> <div class="tab-pane container fade" id="menu5">5</div> <div class="tab-pane container fade" id="menu6">6</div> <div class="tab-pane container fade" id="menu7">7</div> <div class="tab-pane container fade" id="menu8">8</div> <div class="tab-pane container fade" id="menu9">9</div> <div class="tab-pane container fade" id="menu10">10</div> <div class="tab-pane container fade" id="menu11">11</div> <div class="tab-pane container fade" id="menu12">12</div> <div class="tab-pane container fade" id="menu13">13</div> <div class="tab-pane container fade" id="menu14">14</div> <div class="tab-pane container fade" id="menu15">15</div> <div class="tab-pane container fade" id="menu16">16</div> <div class="tab-pane container fade" id="menu17">17</div> <div class="tab-pane container fade" id="menu18">18</div> </div> </div> </div> </div> <div class="col-md-1"> <div class="nav nav-pills"> <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu16">Menu 16</a> <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu17">Menu 17</a> <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu18">Menu18</a> </div> </div> </div> </div>
随时随地看视频慕课网APP
相关分类
Html5