重新排列/推或拉自舉標籤

我有一個奇怪的情況，其中我有2個Bootstrap選項卡。讓我們稱他們爲& B. 案例一：如果選項卡中將被標記爲默認選項卡，然後它應該顯示這樣的：重新排列/推或拉自舉標籤

一個 | B

A同時也是活動標籤！

案例二：如果標籤B被標記爲默認選項卡，然後它應該顯示這樣的：

乙 | A

B同時也是活動標籤！

我以這種方式配置了應用程序，用戶現在可以選擇默認選項卡&它顯示爲活動狀態。但是，如何顯示默認選項卡作爲第一個？ Bootstrap中有沒有像push或pull這樣的東西可以用在這裏？

這裏是引導代碼。現在

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>Bootstrap Case</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    </head> 
    <body> 
     <div class="container"> 
      <h2>Dynamic Tabs</h2> 
      <ul class="nav nav-tabs"> 
      <li class="active"><a data-toggle="tab" href="#tabA">Tab A</a></li> 
      <li><a data-toggle="tab" href="#tabB">Tab B</a></li> 
      </ul> 

      <div class="tab-content"> 
      <div id="tabA" class="tab-pane fade in active"> 
       <h3>Tab A</h3> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
      </div> 
      <div id="tabB" class="tab-pane fade"> 
       <h3>Tab B</h3> 
       <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
      </div> 
      </div> 
     </div> 
    </body> 
</html>

，如果選項卡B被標記爲默認，它會從A中刪除類活性並將其添加到B.另外，將創建一個。這部分工作正常。

但是，如何確保當標籤B被標記爲默認標籤時，它也會顯示爲第一個標籤？

來源

2017-03-15 Sunny

你也應該發佈您的代碼的工作演示 –

我得到它的工作。

當選項卡被標記爲默認時，剛添加了類'默認'。

然後，

ul.nav-tabs { 
    display: flex; 
} 

li.default { 
    order: -1; /* the default is 0 */ 
}

來源

2017-03-15 11:53:25 Sunny

重新排列/推或拉自舉標籤

回答

相關問題