Bootstrap的js外掛之標籤頁(tab)

阿新 • • 發佈：2019-01-18

data-toggle="tab"——指明標籤項具有切換響應功能；

.tab-content——包裹標籤頁的所有內容部分；

.tab-pane——包裹對應標籤項的內容部分；

.fade——設定標籤項切換時有淡入淡出的效果；

.in——設定標籤頁第一項淡入的初始化效果；

.active——設定標籤頁以及對應標籤項的內容處於啟用狀態；

更多細節參考示例：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>飯盒兒——發現身邊不一樣的世界</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="container">
        <ul class="nav nav-tabs" role="tablist" id="myTab">
            <li role="presentation" class="active"><a href="#home" data-toggle="tab">首頁</a></li>
            <li role="presentation"><a href="#about" data-toggle="tab">關於我們</a></li>
            <li role="presentation" class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    新聞資訊
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu" role="menu">
                    <li role="presentation"><a href="#inner" data-toggle="tab" role="menuitem" tabindex="-1">集團要聞</a></li>
                    <li role="presentation"><a href="#outer" data-toggle="tab" role="menuitem" tabindex="-1">行業動態</a></li>
                </ul>
            </li>

        </ul>
        <div id="MyTabContent" class="tab-content">
            <div class="tab-pane fade in active" id="home">
                <h2>歡迎來到飯盒兒的世界</h2>
                <p>
                    擁抱氣味相投的有趣之人；訂閱一個靈魂共振的星球；捕捉那些砰然心動的瞬間；我們只邂逅可愛的陌生人。
                </p>
            </div>
            <div class="tab-pane fade" id="about">
                <h2>關於我們</h2>
                <p>
                    那朵叫青春的雲，曾經飄過我們的天空，淋溼了我們的心情，卻和歲月一起饋贈給我們兩個字——成長。只在此刻，與時光許下諾言，相期，莫違。
                </p>
            </div>
            <div class="tab-pane fade" id="inner">
                <h2>集團要聞</h2>
                <p>
                    我知道我不是一個很好的記錄者，但我比任何人都喜歡回首自己來時的路，我不但的回首，佇足，然手時光仍下我轟轟烈烈的向前奔去。
                </p>
            </div>
            <div class="tab-pane fade" id="outer">
                <h2>行業動態</h2>
                <p>
                    我想有一天，我和一個人足夠契合，我們可以一整天聽著音樂，吃著好吃的，天南地北地聊著，哪怕兩兩相望靜靜坐著也不會尷尬不會無聊。友情也好，愛情也好。
                </p>
            </div>
        </div>
    </div>
    <script>
        $('#myTab li:eq(1) a').tab('show');
//        $('a[data-toggle="tab"]').on("shown.bs.tab",function(e){
//            alert("切換了");
//        });
    </script>

</body>
</html>

Bootstrap的js外掛之標籤頁(tab)

data-toggle="tab"——指明標籤項具有切換響應功能； .tab-content——包裹標籤頁的所有內容部分； .tab-pane——包裹對應標籤項的內容部分； .fade——設定標籤項切換時有淡入淡出的效果； .in——設定標籤頁第一項淡入的初始化效果； .a

解決Bootstrap 標籤頁(Tab)外掛切換echarts不顯示問題

1、參考連線：https://blog.csdn.net/qq_24313955/article/details/78363981 問題描述：在echarts跟bootstrap選項卡整合的時候，預設第一個選中選項卡可以正常載入echarts圖表，但是切換其他選項的時候不能渲染出其他選項卡echarts圖表

Bootstrap 標籤頁Tab外掛的事件

事件Bootstrap標籤頁Tab外掛有兩個事件，分別是 show 和 shown，這兩個事件的含義見表 5‑3。表 5‑3 標籤頁事件及含義事件含義show標籤頁顯示之前，觸發該事件。使用 event.target 和 event.relatedTarget 分別獲取當前活

4.3Bootstrap學習js外掛篇之標籤頁

簡單的標籤頁程式碼： <h1 class="page-header">4.3標籤頁</h1> <ul class="nav nav-tabs"> <li class="active"><a href="#"&g

easy-ui 的標籤頁tab，預設不全部載入，只在點選某個標籤時進行載入。

$(document).ready(function(){$('#tag_id').tabs({ onSelect:function(title){switch (title){case "待辦列表"

Bootstrap 標籤頁（Tab）外掛

您可以通過以下兩種方式啟用標籤頁： 1、通過 data 屬性：您需要新增 data-toggle="tab" 或 data-toggle="pill" 到錨文字連結中新增 nav 和 nav-tab

weex-ui之wxc-tab-page 頂部標籤頁踩坑記

對於初學weex的人來說，有這個麼一個東西可以節省很多開發成本，但由於weex本身的開源特性，有些東西並不完善，博主最近在使用wxc-tab-page 頂部標籤頁的時候發現幾個問題： 1.標籤頁無法通過手勢滑動切換； 2.通過引入BindingX1.0.0後

Bootstrap 標籤頁（Tab）外掛跳轉B頁面相應id的頁面

js是以前查詢使用的，由於時間過長已忘記哪裡借用，還望見諒 Bootstrap 標籤頁（Tab）外掛：任何頁面指定的tab連結，跳去b頁面指定的tab 之前寫個導航程式碼要求跳轉其他頁面指定的tab，調查很久找到一個支援bootstrap的tab跳轉，無需在填寫id，是利

基於jQuery的tab標籤頁外掛

html檔案 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title>tab標籤頁</title><script src="js/jque

spring boot之分頁外掛PageHepler

一.使用原生的PageHepler 1.新增依賴 <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</arti

使用easyUI+bootStrap框架做一個彈出式的tab標籤頁

參考網址：https://blog.csdn.net/wttykj/article/details/78538592 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

如何使用Chrome瀏覽器，打包生成自己的外掛（crx格式檔案）？真男人敢於嘗試新鮮事兒：使用外掛，美化Chrome醜陋的標籤頁，提升福利，程式碼等搜尋效率，無障礙訪問谷歌

chrome extension，副檔名為crx，俗稱chrome擴充套件，chrome外掛。 crx檔案本質就是ZIP檔案，只是谷歌在ZIP檔案頭，插入了自定義的私有欄位，如，外掛描述，外掛ID，金鑰等。使用者可以手動修改crx檔案的副檔名，修改為zip，然後使用普通的解壓工具，就能解壓。

標籤頁外掛（選項卡的效果實現）

Bootstrap -- 外掛: 模態框、滾動監聽、標籤頁

Bootstrap -- 外掛: 模態框、滾動監聽、標籤頁 1. 模態框（Modal）: 覆蓋在父窗體上的子窗體。使用模態框： <!DOCTYPE html> <html> <head> <meta http-equiv="Content

Vue_01之實現Element標籤頁的動態切換

Vue_01之實現Element標籤頁的動態切換及資料傳遞 1 使用場景 2 需要知識 3 演示 3.1 單元件標籤頁的跳轉 3.1 父元件和子元件聯動 1 使用場景

SpringBoot之分頁外掛PageHelper的使用

在springboot中使用PageHelper外掛有兩種較為相似的方式，接下來我就將這兩種方式進行總結。方式一：使用原生的PageHelper1.在pom.xml中引入依賴 <dependency> <groupId&

標籤頁tabs切換jq外掛

標籤頁tabs切換,jq封裝外掛: html結構極度簡單明瞭，tabs標題數增刪方便，click或hover切換事件隨意設定，可設定預設顯示項，啟用項標識自定義，可開啟定時自動切換等等的擴充套件要求。......

JavaScript及jQuery實現tab標籤頁切換

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <

BootStrap-CSS樣式_佈局元件_導航元素(導航或標籤（Tab頁）)

導航元素所涉及樣式： nav-tabs樣式：呈現表格導航或標籤（Tab頁）樣式 nav-pills樣式：呈現膠囊式導航選單（Tab頁）樣式 nav-stacked樣式：水平導航設定為堆疊(垂直)效果 disabled樣式：呈現禁用的導航選單樣式,在li標籤中使用 active樣式

詳解vue2.0 使用動態元件實現 Tab 標籤頁切換效果（vue-cli）

在 vue 中，實現 Tab 切換主要有三種方式：使用動態元件，使用 vue-router 路由，使用第三方外掛。因為這次完成的功能只是簡單切換元件，再則覺得使用路由切換需要改變地址略微麻煩，所以使用的是動態元件實現，如果是在大型應用上，可能使用 vue-router 會方便

Bootstrap的js外掛之標籤頁(tab)

相關推薦