<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css" />
<!--<link rel="stylesheet" href="css/main.css" />-->
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>
ul, li{margin: 0;padding: 0;}
.inform_v1{padding: 0;}
#tab_t, #bab_t{overflow: hidden;}
#tab_t li, #bab_t li{background-color: #99A0A1;display: inline-block;color: white;width: 80px;padding: 6.5px 0;text-align: center; -moz-border-radius: 0 !important;-webkit-border-radius: 0 !important;border-radius: 0 !important; margin: 0 0 15px;}
#bab_t li{width: 160px;}
#tab_t li:hover, #bab_t li:hover{opacity: 1;filter: alpha(opacity=100);cursor: pointer;}
#tab_t .act, #bab_t .act{background-color: #09A9B8;}
</style>
</head>
<body class="index-head index-head2">
<p class="container cont_topb mag_b6">
<p class="row">
<p class="col-xs-12 col-sm-12 col-md-10">
<ul id="tab_t">
<li class="act">父A</li>
<li>父B</li>
<li>父C</li>
<li>父D</li>
</ul>
<p id="tab_c">
<p class="a_b">
<p class="col-xs-12 back_whit inform_v1 commodity_0">
<ul id="bab_t">
<li class="bct">子A</li>
<li>子B</li>
</ul>
<p id="bab_c">
<p class="b_b">内容一</p>
<p class="hide b_b">内容二</p>
</p>
</p>
</p>
<p class="hide a_b">内容二</p>
<p class="hide a_b">内容三</p>
<p class="hide a_b">内容三</p>
</p>
</p>
</p>
</p>
</body>
<script type="text/javascript">
// 父选项卡控制
window.onload = function(){
tab("tab_t","li","tab_c","p","onclick")
function tab(tab_t,tab_t_tag,tab_c,tag_c_tag,evt){
var tab_t = document.getElementById(tab_t);
var tab_t_li = tab_t.getElementsByTagName(tab_t_tag);
var tab_c = document.getElementById(tab_c);
var tab_c_li = document.getElementsByClassName("a_b");
var len = tab_t_li.length;
var i=0;
for(i=0; i<len; i++){
tab_t_li[i].index = i;
tab_t_li[i][evt] = function(){
for(i=0; i<len; i++){
tab_t_li[i].className = '';
tab_c_li[i].className = 'hide a_b';
}
tab_t_li[this.index].className = 'act';
tab_c_li[this.index].className = 'a_b';
}
}
}
};
//子选项卡控制
window.onload = function(){
bab("bab_t","li","bab_c","p","onclick")
function bab(bab_t,bab_t_tag,bab_c,bag_c_tag,bvt){
var bab_t = document.getElementById(bab_t);
var bab_t_li = bab_t.getElementsByTagName(bab_t_tag);
var bab_c = document.getElementById(bab_c);
var bab_c_li = document.getElementsByClassName("b_b");
var ben = bab_t_li.length;
var i=0;
for(i=0; i<ben; i++){
bab_t_li[i].index = i;
bab_t_li[i][bvt] = function(){
for(i=0; i<ben; i++){
bab_t_li[i].className = '';
bab_c_li[i].className = 'hide b_b';
}
bab_t_li[this.index].className = 'bct';
bab_c_li[this.index].className = 'b_b';
}
}
}
};
</script>
</html>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Kaedah window.onload ditindih, letakkan dua keping kod bersama-sama atau gunakan addEventListener
GlobalEventHandlers.onload
Nampaknya window.onload hanya boleh ditulis sekali dalam fail js yang diperkenalkan oleh html yang sama.
Cuba tulis seperti ini: (Saya baru menulis kod secara ringkas dan tidak mengujinya. Hanya menguji dan mengubah suai sendiri)