<!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] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
The window.onload method is overridden, put the two pieces of code together, or use addEventListener
GlobalEventHandlers.onload
It seems that window.onload can only be written once in the js file introduced by the same html.
Try writing it like this: (I just wrote the code briefly and didn’t test it. Just test and modify it yourself)