javascript - 父选项卡bug，子选项卡好用，求解？
本文介绍了javascript - 父选项卡bug，子选项卡好用，求解？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!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">
<div class="container cont_topb mag_b6">
<div class="row">
<div 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>
<div id="tab_c">
<div class="a_b">
<div class="col-xs-12 back_whit inform_v1 commodity_0">
<ul id="bab_t">
<li class="bct">子A</li>
<li>子B</li>
</ul>
<div id="bab_c">
<div class="b_b">内容一</div>
<div class="hide b_b">内容二</div>
</div>
</div>
</div>
<div class="hide a_b">内容二</div>
<div class="hide a_b">内容三</div>
<div class="hide a_b">内容三</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
// 父选项卡控制
window.onload = function(){
tab("tab_t","li","tab_c","div","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","div","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>
解决方案
window.onload方法被覆盖了，把两块代码放一块，或者用addEventListener
这篇关于javascript - 父选项卡bug，子选项卡好用，求解？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
