zoukankan      html  css  js  c++  java
  • bootstrap 选项卡的使用

    1.页面中的tab

    在做项目的时候用到了切换选项卡显示不同图表页面的 需求,如下图

    就直接使用了bootstrapd的选项卡

    学习源头:

    http://www.runoob.com/bootstrap/bootstrap-tab-plugin.html

    <!--图表信息  -->
            <ul id="myTab" class="nav nav-tabs">
                <li class="active">
                    <a href="#zfbt" data-toggle="tab">
                        支付成功订单数量
                    </a>
                </li>
                <li><a href="#cjbt" data-toggle="tab">总计成交金额</a>
                </li><li><a href="#pvbt" data-toggle="tab">PV</a></li>
                </li><li><a href="#uvbt" data-toggle="tab">UV</a></li>
            </ul>
            <div id="myTabContent" class="tab-content" style="margin-top: 20px;">
                <div class="tab-pane fade in active" id="zfbt">
                    <div id="zf" style=" 1688px;height:400px;"></div>
                </div>
                <div class="tab-pane fade" id="cjbt">
                    <div id="cj" style=" 1688px;height:400px;"></div>
                </div>
                <div class="tab-pane fade" id="pvbt">
                    <div id="pv" style=" 1688px;height:400px;"></div>
                </div>
                <div class="tab-pane fade" id="uvbt">
                    <div id="uv" style=" 1688px;height:400px;"></div>
                </div>
            </div>

    2.弹窗中的tab

    学的时候翻看到了layer的 tab层

    //tab层
    layer.tab({
      area: ['600px', '300px'],
      tab: [{
        title: 'TAB1', 
        content: '内容1'
      }, {
        title: 'TAB2', 
        content: '内容2'
      }, {
        title: 'TAB3', 
        content: '内容3'
      }]
    });
  • 相关阅读:
    课时作业
    第八周学习进度
    第一次nabcd编写
    第七周学习进度
    第六天进度
    第五天进度
    第四天进度
    第一篇
    1.Windows 系统下安装 IntelliJ IDEA
    Java开发环境(含IDE)的搭建
  • 原文地址:https://www.cnblogs.com/djwhome/p/8986241.html
Copyright © 2011-2022 走看看