<!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] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
La méthode window.onload est remplacée, assemblez les deux morceaux de code ou utilisez addEventListener
GlobalEventHandlers.onload
Il semble que window.onload ne puisse être écrit qu'une seule fois dans le fichier js introduit par le même html.
Essayez de l'écrire comme ceci : (J'ai juste écrit le code brièvement et je ne l'ai pas testé. Testez-le et modifiez-le vous-même)