<!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>
时间： 2024-10-24 14:46:39