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='https://www.haobala.com/wenda/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>
问题解答
回答1：window.onload方法被覆盖了，把两块代码放一块，或者用addEventListener
回答2：GlobalEventHandlers.onload
貌似window.onload在同一个html引入的js文件里只能写一次。
你这样写试试：（我只是简略的写了代码，没测试，自己测测改改吧）
window.onload = function(){//父选项卡控制tab('tab_t','li','tab_c','a_b','act','p','onclick');//子选项卡控制tab('bab_t','li','bab_c','b_b','bct','p','onclick'); }; function tab(tab_t,tab_t_tag,tab_c,tab_c_li,tab_t_li,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(tab_c_li);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 ’+tab_c_li+’’;}tab_t_li[this.index].className = ’’+tab_t_li+’’;tab_c_li[this.index].className = ’’+tab_c_li+’’; }} }
网公网安备