<!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>一个简单的javascript tab选项卡</title>
<meta name="keyword" content="javascript tab选项卡" />
<meta name="description" content="一个简单的javascript tab选项卡" />
<script type="text/javascript">
/**
* @author
* @copyright private
* @create 23/11/2010
*/
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].onmouseover = (function(i,$d){
return function(){
$d.ts2[$d.s].style.display = 'none';//隐藏前面显示的内容
$d.ts1[$d.s].className = '';//设置之前选中类为null
$d.s = i;//将当前选中索引值负值给$d.s
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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
