引導可切換的選項卡菜單內容推送下來

我想實現通過引導可切換標籤菜單也使用Material Design for bootstrap 引導可切換的選項卡菜單內容推送下來

我有後的第一個總是把它的內容倒（以下其中1號選項卡的問題標籤的內容會）

我尋覓了一圈，發現類似的問題討論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>

工作

來源

2017-05-03 spacing

您需要從默認的活動標籤去除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>

來源

2017-05-03 04:05:36

哇，這麼簡單。非常感謝，這真的讓我很不舒服。我猜官方的MDB文檔是錯誤的呢？因爲我從官方網站[here]（https://mdbootstrap.com/components/tabs/）複製粘貼/修改代碼。演出課到底做了什麼？ – spacing

據我所知，'show'類是用JavaScript動態添加/刪除的，所以手動添加它確實看起來不正確，因此它們的文檔是不正確的。我想在編寫文檔時，他們剛剛從瀏覽器中複製了代碼塊，在JS添加了該類之後，就使用了它。 –

取出顯示類從第一個選項卡窗格

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

來源

2017-05-03 04:08:18 Valarpirai

引導可切換的選項卡菜單內容推送下來

回答

相關問題