Bootstrap分頁和選項卡式元素

Question

我在使用Bootstrap的選項卡元素中有一些內容，如下所示：

<div class="tab-content"> 
   <div class="tab-pane active" id="website-information">
      ...
   </div> 
   <div class="tab-pane" id="personal-information"> 
      ...
   </div> 
   <div class="tab-pane" id="payment-information"> 
      ...
   </div> 
</div> 

然后在這之后我有一些像這樣的分頁元素：

<ul class="pager">
   <li class="previous"><a href="#website-information" data-toggle="tab">Previous</a></li>
   <li class="next"><a href="#owner-information" data-toggle="tab">Next</a></li>
</ul>

正如你所看到的那樣，分頁按鈕可以讓你回到標簽並分別轉發標簽，而現在它們只是指向一個工作正常的標簽，如果你只有兩個標簽，但我可能會有大約4個當我完成時。 我確信有一種明顯而簡單的方法可以使前一個和下一個按鈕實際上與標簽一起使用，我只是想不出來。 任何幫助和/或建議將不勝感激。

這是bootstrap提供的選擇以前活動和tab元素的下一個選項卡。 但我不知道如何使它們工作：

$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
})

Answer 1

您將需要Javascript來執行此操作。 HTML沒有自動檢測下一個或上一個選項卡的功能。

看一下jQuery，這是一些Bootstraps功能所必需的。 您當然不需要使用jQuery來解決這個特定問題或影響，具體取決於您的技能水平和要求，您可以像任何現代瀏覽器支持一樣使用常規Javascript，或者您可以更高級並使用更智能的Javascript框架來執行某些操作為你工作。

例如，看一下jQuery選擇器和jQuery .children（）函數

編輯

您在此處提供的默認Bootstrap解決方案並非旨在使下一個和上一個按鈕工作。 它的作用是傳遞你點擊包含data-toggle="tab"的所有鏈接的“e data-toggle="tab" ，然后激活它。

您需要重寫和修改該段代碼。 選擇器是一個可能的解決方案的一部分，您可以選擇所有選項卡，然后讓jQuery確定它們所處的順序。然后您可以使用Next按鈕調用“next（）”和Back按鈕“back（）”然后基本上將活動標簽交換為-1或+1。

Answer 2

我在這里找到了一個簡潔的例子，說明如何使用引導標簽添加分頁： http ： //www.bootply.com/60206

希望這可以幫助！