用js写tab页面

落日映苍穹つ 2022-05-14 06:42 100阅读 0赞

原理：依据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>