整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
了在頁面中使用標簽頁，例如測試頁面中的標簽頁：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>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>標簽頁</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body>
<ul class="nav nav-pills">
<li class="active"><a href="#n1" data-toggle="tab">首頁</a></li>
<li><a href="#n2" data-toggle="tab">夢想</a></li>
<li><a href="#n3" data-toggle="tab">愛心</a></li>
<li><a href="#n4" data-toggle="tab">安逸</a></li>
</ul>
<div class="tab-content" style="padding:20px;">
<div class="tab-pane active fade in" id="n1">
<img src="img/s1.jpg"/>
</div>
<div class="tab-pane fade" id="n2">
<img src="img/s2.jpg"/>
</div>
<div class="tab-pane fade" id="n3">
<img src="img/s3.jpg"/>
</div>
<div class="tab-pane fade" id="n4">
<img src="img/s4.jpg"/>
</div>
</div>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
使用jQuery提供的tab組件show方法網頁tabs-1.html的代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>標簽頁JQ版</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<style type="text/css">
</style>
</head>
<body>
<ul class="nav nav-pills">
<li class="active"><a href="#n1">首頁</a></li>
<li><a href="#n2">夢想</a></li>
<li><a href="#n3">愛心</a></li>
<li><a href="#n4">安逸</a></li>
</ul>
<div class="tab-content" style="padding:20px;">
<div class="tab-pane active fade in" id="n1">
<img src="img/s1.jpg"/>
</div>
<div class="tab-pane fade" id="n2">
<img src="img/s2.jpg"/>
</div>
<div class="tab-pane fade" id="n3">
<img src="img/s3.jpg"/>
</div>
<div class="tab-pane fade" id="n4">
<img src="img/s4.jpg"/>
</div>
</div>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$('.nav a').on('click',function(){
$(this).tab('show');
});
</script>
</body>
</html>
至此，案例制作完成。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
