1. 程式人生 > >用js寫tab頁面

用js寫tab頁面

原理:依據bootStrap框架的tab頁樣式:原生態的是這樣:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/bootstrap-theme.min.css">
        <script src="js/jquery-3.2.1.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <title>原生態選項卡的結構</title>
    </head>

    <body>
        <!--
        參考網址:http://www.phpos.net/bootstrap/Bootstrap-javascript-Togglable-tabs.html#
        -->
        <div class="demo">

            <!-- Nav tabs -->
            <!--
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active">
                    <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>
                </li>
                <li role="presentation">
                    <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>
                </li>
                <li role="presentation">
                    <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a>
                </li>
                <li role="presentation">
                    <a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a>
                </li>
            </ul>
            -->

            <!-- Tab panes -->
            <!--
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="home">aaa</div>
                <div role="tabpanel" class="tab-pane" id="profile">bbb</div>
                <div role="tabpanel" class="tab-pane" id="messages">ccc</div>
                <div role="tabpanel" class="tab-pane" id="settings">ddd</div>
            </div>
            -->

        </div>
    </body>

</html>

===========================================

自己寫得示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/bootstrap-theme.min.css">
        <script src="js/jquery-3.2.1.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script type="text/javascript">
            $(function() {
                var biaoTi = "變電站資訊";
                var tabHead = [
                    {'tab': '有功功率'},
                    {'tab': '電壓'},
                    {'tab': '電流'},
                    {'tab': "aaaa"},
                    {'tab': '三相不平衡'}
                ];
                var neiRong=[
                    {"nr":"www"},
                    {"nr":"aaa"},
                    {"nr":"bbb"},
                    {"nr":"ccc"},
                    {"nr":"ddd"}
                    ];

                tabWindow(biaoTi,tabHead,neiRong);
            });

            function tabWindow(b, th, n) {
                var hf = new Array();
                var ar = new Array();
                var tapWindow = '<div class="test">' + b + '<span class="close" id="close"></span></div>';
                tapWindow += '<div class="tab" role="tabpanel">';

                tapWindow += '<ul class="nav nav-tabs" role="tablist">';
                for(var i = 0; i < th.length; i++) {
                    hf[i] = "#hf" + (i + 1);
                    ar[i] = "hf" + (i + 1);
                    if(i == 0) {
                        tapWindow += '<li role="presentation" class="active">';
                    } else {
                        tapWindow += '<li role="presentation">';
                    }
                    tapWindow += '<a href=' + hf[i] + ' aria-controls=' + ar[i] + ' role="tab" data-toggle="tab">' + th[i].tab + '</a>';
                    tapWindow += '</li>';
                }
                tapWindow += '</ul>';
                tapWindow += '<div class="tab-content tabs">';
                var tabid = new Array();
                for(var i = 0; i < th.length; i++) {
                    tabid[i] = 'neirongId' + (i + 1);
                    if(i == 0) {
                        tapWindow += '<div role="tabpanel" class="tab-pane fade in active" id=' + ar[i] + '>';
                    } else {
                        tapWindow += '<div role="tabpanel" class="tab-pane fade in" id=' + ar[i] + '>';
                    }
                    tapWindow += '<div class="sxdl" id=' + tabid[i] + ' style=" width:410px;height:425px;">';
                    tapWindow += n[i].nr;
                    tapWindow += '</div>';
                    tapWindow += '</div>';
                }
                tapWindow += '</div>';
                tapWindow += '</div>';
                $(".demo").html("");
                $(".demo").html(tapWindow);
            }

        </script>
        <title>原生態選項卡的結構</title>
    </head>

    <body>
        <div class="demo">
        </div>
    </body>

</html>