Question

我在使用bootstrap实现可切换选项卡时遇到了一些困难，我已经对文档和各种工作演示进行了三次检查，但仍无法使其正常工作

我实际上是使用Material Design for Bootstrap来实现它，但它不应该影响我看到的代码

＆＃13;

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

＆＃13;

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

Answer 1

＆＃13;

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

Answer 2

更改jquery文件顺序

＆＃13;

$('#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;

Answer 3

你需要关闭）在脚本的末尾。

另外，如果你能使它更具体，那就更好了， $（'＃toggle-tabs li a'）。点击（function（e）{

Bootstrap Togglable标签无法正常工作

3 个答案: