Using the bootstrap tab

1. Tabs in the page

When working on a project, the need to switch tabs to display different chart pages is used, as shown below

Just use the bootstrapd tab directly

Learning source:

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">
                    Number of successful orders paid
                </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="width: 1688px;height:400px;"></div>
            </div>
            <div class="tab-pane fade" id="cjbt">
                <div id="cj" style="width: 1688px;height:400px;"></div>
            </div>
            <div class="tab-pane fade" id="pvbt">
                <div id="pv" style="width: 1688px;height:400px;"></div>
            </div>
            <div class="tab-pane fade" id="uvbt">
                <div id="uv" style="width: 1688px;height:400px;"></div>
            </div>
        </div>

2. Tab in the pop-up window

When I was learning, I saw the tab layer of the layer

//tab layer
layer.tab({
  area: ['600px', '300px'],
  tab: [{
    title: 'TAB1',
    content: 'Content 1'
  }, {
    title: 'TAB2',
    content: 'Content 2'
  }, {
    title: 'TAB3',
    content: 'Content 3'
  }]
});