javascript - Bootstrap 可切换选项卡无法正常工作

Question

我在使用 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>

Answer 1

更改 jquery 文件顺序

$('#toggle-tabs a').click(function(e) {
      e.preventDefault()
      $(this).tab('show')
    }

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