呃,无聊封装一个选项卡.
这潭死水快干了.随便更新个吧..
冰块,我快写完了,你竟然去睡觉了.鄙视你.
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="UTF-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript">
/**
* @author Rekey
*/
var tab = function(data){
this.data = data;
}
tab.prototype = {
init:function(){
var $t = this;
var $d = this.data;
$d.t1 = $d.t1?$d.t1:'span';
$d.t2 = $d.t2?$d.t2:'ul';
$d.cur = $d.cur?$d.cur:'current';
$d.s = $d.s?$d.s:0;
$d.ts1 = document.getElementById($d.id).getElementsByTagName($d.t1);
$d.ts2 = document.getElementById($d.id).getElementsByTagName($d.t2)
$d.ts1[$d.s].className = $d.cur;
$d.ts2[$d.s].style.display = 'block';
for(var i = 0; i < $d.ts1.length; i++){
$d.ts1[i].onclick = (function(i,$d){
return function(){
$d.ts2[$d.s].style.display = 'none';
$d.ts1[$d.s].className = '';
$d.s = i;
this.className = $d.cur;
$d.ts2[i].style.display = 'block';
}
})(i,$d)
}
}
}
</script>
<style type="text/css">
*{margin:0;padding:0;list-style:none}
body{padding:10px;font-size:12px;}
.tab{width:520px;background:#fff;margin-bottom:10px;}
.tab span{float:left;height:20px;line-height:20px;width:78px;border:1px solid #aeaeae;border-bottom:none;margin:0 5px 0 0;text-align:center;cursor:pointer;}
.tab span.current{position:relative;margin-bottom:-1px;background:#fff;height:21px;}
.tab ul{clear:both;border:1px solid #aeaeae;padding:5px;display:none;}
</style>
</script></head>
<body>
<div id="tab" class="tab">
<span>选项A</span>
<span>选项B</span>
<span>选项C</span>
<span>选项D</span>
<span>选项E</span>
<span>选项F</span>
<ul><li>切换吧切换吧a</li></ul>
<ul><li>切换吧切换吧b</li></ul>
<ul><li>切换吧切换吧C</li></ul>
<ul><li>切换吧切换吧D</li></ul>
<ul><li>切换吧切换吧E</li></ul>
<ul><li>切换吧切换吧F</li></ul>
</div>
<div id="tab1" class="tab">
<span>选项A</span>
<span>选项B</span>
<span>选项C</span>
<span>选项D</span>
<span>选项E</span>
<span>选项F</span>
<ul><li>切换吧切换吧a</li></ul>
<ul><li>切换吧切换吧b</li></ul>
<ul><li>切换吧切换吧C</li></ul>
<ul><li>切换吧切换吧D</li></ul>
<ul><li>切换吧切换吧E</li></ul>
<ul><li>切换吧切换吧F</li></ul>
</div>
<script type="text/javascript">
var tab1 = new tab({id:'tab',s:5});
tab1.init()
var tab = new tab({id:'tab1',s:5});
tab.init()
</script>
</body>
</html>