多Tab切換範例

Widget程式碼範例

<div class="chart_content">
    <p>可自訂widget說明(可省略)</p>
    <!-- 多Tab切換 -->
    <div class="tab_slider">
        <!-- tab按鈕:建議每組tab2~4個,需與tab_content數量相同 -->
        <div class="tab_control">
            <ul>
                <!-- span可放2組,建議字數精簡 -->
                <li><a href="#"><span>...</span></a></li>
                <li><a href="#"><span>...</span><span>...</span></a></li>
                <li><a href="#"><span>...</span></a></li>
                <li><a href="#"><span>...</span></a></li>
            </ul>
        </div>
        <!-- tab內容:建議每組tab2~4個,需與tab_control數量相同 -->
        <div class="tab_content">
            <ul>
                <li>
                    <!-- 第1個圖表 -->
                    <figure class="highcharts-figure">
                        <div id="自訂名稱"></div>
                    </figure>
                </li>
                <li>
                    <!-- 第2個圖表 -->
                    <figure class="highcharts-figure">
                        <div id="自訂名稱"></div>
                    </figure>
                </li>
                <li>
                    <!-- 第3個圖表 -->
                    <figure class="highcharts-figure">
                        <div id="自訂名稱"></div>
                    </figure>
                </li>
                <li>
                    <!-- 第4個圖表 -->
                    <figure class="highcharts-figure">
                        <div id="自訂名稱"></div>
                    </figure>
                </li>
            </ul>
        </div>
    </div>
</div>

多Tab切換

update:

多Tab切換

update:

多Tab切換

update:

多Tab切換

update:

多Tab切換

update:

多Tab切換

update:

多Tab切換

update:

多Tab切換

update:

多Tab切換

update:

多Tab切換

update:

多Tab切換

update: