用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>

</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>

</html>

猜你喜欢