我在使用bootstrap实现可切换选项卡时遇到了一些困难,我已经对文档和各种工作演示进行了三次检查,但仍无法使其正常工作
我实际上是使用Material Design for Bootstrap来实现它,但它不应该影响我看到的代码
$('#toggle-tabs a').click(function(e) {
e.preventDefault()
$(this).tab('show')
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/js/mdb.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/css/mdb.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" id="toggle-tabs">
<div class="row">
<div class="col-md-2 scrollbarlook" id="categorias">
<ul class="nav nav-tabs md-pills pills-secondary" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#test1" role="tab"><br> test1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#test2" role="tab"><br> test2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#test3" role="tab"><br> test3</a>
</li>
</ul>
</div>
<div class="col-md-6">
<!-- Tab panels -->
<div class="tab-content vertical">
<!--Panel 1-->
<div class="tab-pane fade in show active" id="test1" role="tabpanel">
<br>
<p>Teste 1</p>
</div>
<!--/.Panel 1-->
<!--Panel 2-->
<div class="tab-pane fade in" id="test2" role="tabpanel">
<br>
<p>Teste 2. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
</div>
<!--/.Panel 2-->
<!--Panel 3-->
<div class="tab-pane fade in" id="test3" role="tabpanel">
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
</div>
<!--/.Panel 3-->
</div>
</div>
</div>
</div>
&#13;
答案 0 :(得分:1)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/js/mdb.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/css/mdb.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid" id="toggle-tabs">
<div class="row">
<div class="col-md-2 scrollbarlook" id="categorias">
<ul class="nav nav-tabs md-pills pills-secondary" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#test1" role="tab"><br> test1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#test2" role="tab"><br> test2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#test3" role="tab"><br> test3</a>
</li>
</ul>
</div>
<div class="col-md-6">
<!-- Tab panels -->
<div class="tab-content vertical">
<!--Panel 1-->
<div class="tab-pane fade in show active" id="test1" role="tabpanel">
<br>
<p>Teste 1</p>
</div>
<!--/.Panel 1-->
<!--Panel 2-->
<div class="tab-pane fade in" id="test2" role="tabpanel">
<br>
<p>Teste 2. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
</div>
<!--/.Panel 2-->
<!--Panel 3-->
<div class="tab-pane fade in" id="test3" role="tabpanel">
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
</div>
<!--/.Panel 3-->
</div>
</div>
</div>
</div>
&#13;
答案 1 :(得分:1)
更改jquery文件顺序
$('#toggle-tabs a').click(function(e) {
e.preventDefault()
$(this).tab('show')
}
&#13;
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/css/mdb.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/js/mdb.min.js"></script>
<div class="container-fluid" id="toggle-tabs">
<div class="row">
<div class="col-md-2 scrollbarlook" id="categorias">
<ul class="nav nav-tabs md-pills pills-secondary" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#test1" role="tab"><br> test1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#test2" role="tab"><br> test2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#test3" role="tab"><br> test3</a>
</li>
</ul>
</div>
<div class="col-md-6">
<!-- Tab panels -->
<div class="tab-content vertical">
<!--Panel 1-->
<div class="tab-pane fade in show active" id="test1" role="tabpanel">
<br>
<p>Teste 1</p>
</div>
<!--/.Panel 1-->
<!--Panel 2-->
<div class="tab-pane fade in" id="test2" role="tabpanel">
<br>
<p>Teste 2. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
</div>
<!--/.Panel 2-->
<!--Panel 3-->
<div class="tab-pane fade in" id="test3" role="tabpanel">
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
</div>
<!--/.Panel 3-->
</div>
</div>
</div>
</div>
&#13;
答案 2 :(得分:0)
你需要关闭)在脚本的末尾。
另外,如果你能使它更具体,那就更好了, $('#toggle-tabs li a')。点击(function(e){