zoukankan      html  css  js  c++  java
  • 浅析Bootstrap中Tab(标签页)的使用方法

     

    Bootstrap 导航元素使用相同的标记和基类,改变修饰的class,可以在不同的样式间进行切换
    如".nav-pills"(胶囊式导航)与 “.nav-tabs” (标签式导航)

    创建一个标签式的导航菜单:

    以一个带有class .nav 的无序列表开始。
    添加 class .nav-tabs
    下面的实例演示了这点:

    <!-- 导航区 -->
    
    <ul class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
      <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
      <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
      <li role="presentation"><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
    </ul>
     
    <!-- 面板区 -->
    <div class="tab-content">
      <div role="tabpanel" class="tab-pane active" id="home">...</div>
      <div role="tabpanel" class="tab-pane" id="profile">...</div>
      <div role="tabpanel" class="tab-pane" id="messages">...</div>
      <div role="tabpanel" class="tab-pane" id="settings">...</div>
    </div>
    

    结果如下显示:
    在这里插入图片描述
    创建一个胶囊式的导航菜单:

    如果需要把标签改成胶囊的样式,只需要使用".nav-pills"

    代替".nav-tabs"即可,其他的步骤与上面相同。

    结果如下所示:
    在这里插入图片描述

    标签页用法

    标签页组件分为两部分,导航区与面板区。导航区用于绑定点击事件,切换对应的面板。
    导航区为一个<ul>列表,要求<ul>带"nav nav-tabs“或”nav nav-pills"这两种类名。<li>下的标签要求有data-toggle="tab"属性,你可以通过data-targethref指定对应的面板。

    面板区容器要求带"tab-content“类名,下面的每个面板都要求带”tab-pane"类名。

    • 通过 data 属性:

    添加 data-toggle="tab"或 data-toggle="pill"到导航区ul中来启用标签页。

    添加 nav 和nav-tabs类到导航区ul中,将会应用 Bootstrap标签样式,添加nav 和 nav-pills类到导航区ul中,将会应用Bootstrap胶囊式样式。

    这样你直接引入 bootstrap.js 就能用了,但你必须为当中某个标签页的<li>元素指定"active"类名(active:激活当前对象)

    <!-- 导航区 -->  
     
      <ul class="nav nav-tabs" role="tablist">  
     
      <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>    <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>  <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>   <li role="presentation"><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
     
    </ul>   
     
    <!-- 面板区 --> 
     
     
    <div class="tab-content">    <div role="tabpanel" class="tab-pane active" id="home">...</div>  
     
      <div role="tabpanel" class="tab-pane" id="profile">...</div>  
     
      <div role="tabpanel" class="tab-pane" id="messages">...</div>  
     
      <div role="tabpanel" class="tab-pane" id="settings">...</div> 
     
    </div>  
    
    • 通过 JavaScript

    也可以使用 Javscript 来启用标签页,如下所示:

           $(function () {
            $('#myTab a:last').tab('show');//初始化显示哪个tab
          
            $('#myTab a').click(function (e) {
              e.preventDefault();//阻止a链接的跳转行为
              $(this).tab('show');//显示当前选中的链接及关联的content
            })
          })
    

    注:

    如果你想用JavaScript明确指定哪个面板被激活,你要对它的某个标签页的链接使用tab("show")方法,而不是作用于它的容器上。并且如果使用javascript实现这种导航内容的切换,a标签中无须再添加data-toggle='tab',当然,如果每个a链接都使用了此属性,那完全没有必要在用js来实现了

    下面的实例演示了以不同的方式来激活各个标签页:

    // 通过名称选取标签页
     
          $('#myTab a[href="#profile"]').tab('show')  
     
    // 选取第一个标签页  
     
          $('#myTab a:first').tab('show')   
     
          // 选取最后一个标签页  
     
          $('#myTab a:last').tab('show')    
     
    // 选取第三个标签页(从 0 开始索引)  
     
          $('#myTab li:eq(2) a').tab('show')
     

     

  • 相关阅读:
    C++函数模板的显示调用与隐式调用
    git显示颜色配置
    STL容器元素应满足的条件
    vector缩减容量
    PAT (Basic Level) Practise:1036. 跟奥巴马一起编程
    Core Java Volume I — 4.10. Class Design Hints
    Core Java Volume I — 4.7. Packages
    蓝牙(Profile)构成
    Android开发之Java必备基础
    主机控制器接口(HCI)
  • 原文地址:https://www.cnblogs.com/yelanggu/p/13204208.html
Copyright © 2011-2022 走看看