模拟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>
posted on 2014-10-02 11:58 bigdesign 阅读(278) 评论(0) 收藏举报