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