Question

我正在尝试通过bootstrap实现一个可切换的标签菜单，并使用Material Design for bootstrap

在第一个选项卡总是推送其内容后（第一个标签内容的下方），我遇到了问题

我已经搜索过并发现了一个类似的问题here，并尝试了解决方案，但它似乎对我不起作用

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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" type="text/javascript">
</script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<script src="https://use.fontawesome.com/abacba2780.js">
</script>

<div class="container-fluid">
  <!-- Content -->
  <div class="row">
    <!-- Nav tabs -->
    <div class="col-sm-2">
      <ul class="nav nav-tabs md-pills pills-secondary flex-column" role="tablist">
        <li class="nav-item elegant-color-dark">
          <a class="nav-link active" data-toggle="tab" href="#test1" role="tab"><br>
            <h3>Test1</h3>
          </a>
        </li>
        <li class="nav-item elegant-color-dark">
          <a class="nav-link" data-toggle="tab" href="#test2" role="tab"><br>
            <h3>Test2</h3>
          </a>
        </li>
        <li class="nav-item elegant-color-dark">
          <a class="nav-link" data-toggle="tab" href="#test3" role="tab"><br>
            <h3>Test3</h3>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>
<!-- Tab panels -->
<div class="tab-content vertical col-sm-10" id="toggle-tabs">
  <!--Panel 1-->
  <div class="tab-pane fade in show active" id="test1" role="tabpanel">
    <h3>Test1</h3>
  </div>
  <!--Panel 2-->
  <div class="tab-pane fade in" id="test2" role="tabpanel">
    <h3>Test2</h3>
  </div>
  <!--Panel 3-->
  <div class="tab-pane fade in" id="test3" role="tabpanel">
    <h3>Test3</h3>
  </div>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/css/mdb.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/js/mdb.min.js" type="text/javascript">
</script>

Answer 1

您需要从默认的有效标签中删除show类，因此tab-pane fade in show active变为tab-pane fade in active：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
  </script>
  <!-- Latest compiled and minified CSS -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <!-- Optional theme -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
  <!-- Latest compiled and minified JavaScript -->

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript">
  </script>
  <script src="main.js" type="text/javascript">
  </script>
  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
  <script src="https://use.fontawesome.com/abacba2780.js">
  </script>
</head>

<body>
  <div class="container-fluid">
    <!-- Content -->
    <div class="row">
      <!-- Nav tabs -->
      <div class="col-sm-2">
        <ul class="nav nav-tabs md-pills pills-secondary flex-column" role="tablist">
          <li class="nav-item elegant-color-dark">
            <a class="nav-link active" data-toggle="tab" href="#test1" role="tab"><br>
              <h3>Test1</h3>
            </a>
          </li>
          <li class="nav-item elegant-color-dark">
            <a class="nav-link" data-toggle="tab" href="#test2" role="tab"><br>
              <h3>Test2</h3>
            </a>
          </li>
          <li class="nav-item elegant-color-dark">
            <a class="nav-link" data-toggle="tab" href="#test3" role="tab"><br>
              <h3>Test3</h3>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- Tab panels -->
  <div class="tab-content vertical col-sm-10" id="toggle-tabs">
    <!--Panel 1-->
    <div class="tab-pane fade in active" id="test1" role="tabpanel">
      <h3>Test1</h3>
    </div>
    <!--Panel 2-->
    <div class="tab-pane fade in" id="test2" role="tabpanel">
      <h3>Test2</h3>
    </div>
    <!--Panel 3-->
    <div class="tab-pane fade in" id="test3" role="tabpanel">
      <h3>Test3</h3>
    </div>
  </div>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/css/mdb.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/js/mdb.min.js" type="text/javascript">
  </script>
</body>

</html>

Answer 2

从第一个标签页

中删除 show 类

<div class="tab-pane fade in show active" id="test1" role="tabpanel">
  <h3>Test1</h3>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
  </script>
  <!-- Latest compiled and minified CSS -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <!-- Optional theme -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
  <!-- Latest compiled and minified JavaScript -->

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript">
  </script>
  <script src="main.js" type="text/javascript">
  </script>
  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
  <script src="https://use.fontawesome.com/abacba2780.js">
  </script>
</head>

<body>
  <div class="container-fluid">
    <!-- Content -->
    <div class="row">
      <!-- Nav tabs -->
      <div class="col-sm-2">
        <ul class="nav nav-tabs md-pills pills-secondary flex-column" role="tablist">
          <li class="nav-item elegant-color-dark">
            <a class="nav-link active" data-toggle="tab" href="#test1" role="tab"><br>
              <h3>Test1</h3>
            </a>
          </li>
          <li class="nav-item elegant-color-dark">
            <a class="nav-link" data-toggle="tab" href="#test2" role="tab"><br>
              <h3>Test2</h3>
            </a>
          </li>
          <li class="nav-item elegant-color-dark">
            <a class="nav-link" data-toggle="tab" href="#test3" role="tab"><br>
              <h3>Test3</h3>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- Tab panels -->
  <div class="tab-content vertical col-sm-10" id="toggle-tabs">
    <!--Panel 1-->
    <div class="tab-pane fade in active" id="test1" role="tabpanel">
      <h3>Test1</h3>
    </div>
    <!--Panel 2-->
    <div class="tab-pane fade in" id="test2" role="tabpanel">
      <h3>Test2</h3>
    </div>
    <!--Panel 3-->
    <div class="tab-pane fade in" id="test3" role="tabpanel">
      <h3>Test3</h3>
    </div>
  </div>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/css/mdb.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/js/mdb.min.js" type="text/javascript">
  </script>
</body>

</html>

Bootstrap可切换选项卡菜单按下内容

2 个答案: