Docker 文檔編譯 - 創建標簽（Tab）頁

了在頁面中使用標簽頁，例如測試頁面中的標簽頁：https://docker.ossez.com/test/ 這個需要使用 HTML 文件。

標簽頁使用的是 Bootstrap CSS/JS，因此請參考相關的文檔來獲得有關標簽頁使用的更多有關內容和信息。針對標準的水平標簽頁，你可以拷貝和粘貼下面的表單內容，在上面的表單內容中關鍵的地方在 href="#id" 和 id="id"。

這個需要和你的標簽頁配置進行對應。以便于添加和刪除標簽頁。

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" data-target="#tab1">TAB 1 HEADER</a></li>
  <li><a data-toggle="tab" data-target="#tab2">TAB 2 HEADER</a></li>
</ul>
<div class="tab-content">
  <div id="tab1" class="tab-pane fade in active">TAB 1 CONTENT</div>
  <div id="tab2" class="tab-pane fade">TAB 2 CONTENT</div>
</div>

有關更多標簽頁的內容，請參考 https://docker.ossez.com/test/ 頁面中的內容。

如果上圖顯示的標簽頁。

簽tab頁在，當前的web中應用十分廣泛，君不見，在博客的右側出現的最新文章和隨機文章中有它的身影，在大型門戶網站中也有它的身影，可以說其無處不在的刷著存在感。

既然其如此囂張的存在，我們沒有理由不應用呀。

來吧。讓bootstrap賜予我力量，用它來簡單的，毫無壓力的應用吧。

先上個某易網站的效果：

下面讓我們開始吧：

1、用data屬性來調用：

您需要添加 data-toggle="tab" 或 data-toggle="pill" 到錨文本鏈接中。
為標簽頁設置淡入淡出效果，添加 .fade 到每個 .tab-pane 后面。第一個標簽頁必須添加 .in 類，以便淡入顯示初始內容。
示例來了：
第一步引入css和js文件。
第二步HTML結構之頁面標簽：
注意，可以用ul來表示，li中a的href 一定要和下面div的id相呼應，data-toggle必須為tab。
第三步，要顯示的內容：
ps：div的ID一定要和上面ul下的li的a的href對應。錯不得。
搞定了，相關樣式的修改，需要修改對應的css即可。

2、用JavaScript來調用：

$('#myTab a').click(function (e) {

e.preventDefault()

$(this).tab('show')})

一般情況下，我用第一種方法，不知道你怎么用？來評論告訴我？

這是click改變顯示內容的，你知道如何用hover方式嗎？

bootstap環境下實現標簽頁（tab選項卡）效果比較簡單，一般有兩種方法：一種是用bootstrap提供的數據切換（data-toggle="tab"）功能；一種是用jQuery提供的tab組件show方法。

案例效果如下：

下面看一下實現標簽頁（tab選項卡）效果兩種網頁的代碼。

使用數據切換（data-toggle="tab"）功能網頁tabs.html的代碼如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</ul>

</div>

</div>

</div>

</div>

</body>

</html>

使用jQuery提供的tab組件show方法網頁tabs-1.html的代碼如下：

<!DOCTYPE html>

<html>

<head>

<title>標簽頁JQ版</title>

</style>

</head>

<body>

</ul>

</div>

</div>

</div>

</div>

$('.nav a').on('click',function(){

$(this).tab('show');

});

</script>

</body>

</html>

至此，案例制作完成。

在線咨詢

上一篇：springboot(二十四)使用springboo
下一篇：純文本輸入，就能繪制精美數學圖表：CMU繪圖工具登G

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Docker 文檔編譯 - 創建標簽（Tab）頁

您的項目需求