首页 > 代码库 > 模拟TAB 采用 attachEvent 遇到的IE兼容问题

模拟TAB 采用 attachEvent 遇到的IE兼容问题

<!DOCTYPE> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>div+css+js模拟TAB</title> <style>body{margin:0;padding:0; background:#CCCCCC} a{text-decoration:none} #tabnav ul{padding:0;margin:0} #tabnav li{float:left;list-style:none; padding:10px;} #tabnav li.on{display:inline-block;background:#fff;} #tabcon{ clear:both; background:#009933; padding:10px;text-align:left;color:#fff} .hide {display:none} </style> </head> <body> <div id="tab"> <div id="tabnav">    <ul> <li class="on"><span>TAB1111</span></li>  <!--这里弄成  <li class="on"><span>TAB1111</span></li>  就不可以了 --><li>TAB2222</li> <li>TAB3333</li> <li>TAB4444</li> </ul> </div> <div id="tabcon">  <div> 这里是内容111<br> 这里是内容111<br> 这里是内容111<br> </div> <div class="hide"> 这里是内容222<br> 这里是内容222<br> 这里是内容222<br> </div> <div class="hide"> 这里是内容333<br> 这里是内容333<br> 这里是内容333<br> </div> <div class="hide"> 这里是内容444<br> 这里是内容444<br> 这里是内容444<br> </div> </div> </div> <script>function get_id(id) {    return (typeof id == "string") ? document.getElementById(id) : id;}function changeTab(tab_id, con_id, on, type) {    var tab_li = get_id(tab_id).getElementsByTagName(‘li‘);    var con_div = get_id(con_id).getElementsByTagName(‘div‘);        for (var i = 0; i < tab_li.length; i++) {        tab_li[i].index = i;        if (document.all) {            //alert(1)                        tab_li[i].attachEvent(‘on‘ + type, currTab);                    } else {                        tab_li[i].addEventListener(type, currTab, false);        }    }        function currTab() {        hideAll();        if (document.all) {            alert(i) // 4            // alert(this.event.srcElement.innerHTML)  // 此处的this传过来的不是tab_li[i]            // alert(this.event.srcElement.index)      // 只有当点击的元素是 li 时,才有index值。                        //this.event.srcElement.className = on;            //con_div[this.event.srcElement.index].className = ‘‘;                        // this.className = on;            // con_div[this.index].className = ‘‘;                    } else {            this.className = on;            con_div[this.index].className = ‘‘;        }    }        function hideAll() {        for (var i = 0; i < con_div.length; i++) {            con_div[i].className = ‘hide‘;            tab_li[i].className = ‘‘;        }    }}changeTab("tabnav", "tabcon", "on", "click");// changeTab("tabnav", "tabcon", "on" ,"mouseover");</script> </body> </html>

 

模拟TAB 采用 attachEvent 遇到的IE兼容问题