写了个选项卡效果，看看

点这里看效果
本身这个效果没什么难度,
但是这次的代码比以往的代码的写法不同,这次写成了链式.
下面是代码,也不知道这样写会不会带来一些问题，所以请各位大虾指教.
欢迎拍砖捉虫
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
</head><body>
title:　　<input id='tt' value="笑话" type="text"  style="width:150px"/><br>
address:　<input id='cc' value="http://xiaohua.zol.com.cn/" type="text" style="width:350px"/><br>
<input value="add" type="button"  onclick="add(wt.$('tt').elm.value,wt.$('cc').elm.value)" />
<hr style=" border:1px dashed #999999;">
<br>
<div id='cc'>
    <ul id='t'>
        <li class="active">My Blog</li>
        <li>51js</li>
        <li>Blue-js</li>
<li>我是空的</li>
    </ul>
    <div id='c'>
        <div >
        <iframe style="margin:10px;border:1px dashed #CCCCCC;  width:98%; height:96%" frameborder="0" src="http://blog.csdn.net/wtcsy/"></iframe>
        </div>
        <div style="display:none">
        <iframe style="margin:10px; border:1px dashed #CCCCCC; width:98%; height:96%" frameborder="0" src="http://bbs.51js.com/forumdisplay.php?fid=9"></iframe>
        </div>
        <div style="display:none">
<iframe style="margin:10px;border:1px dashed #CCCCCC;  width:98%; height:96%" frameborder="0" src="http://bbs.blueidea.com/forum-1-1.html"></iframe>
        </div>       
<div style="display:none"></div>          
    </div>
</div>    
</div>
<script language="javascript">
document.all&&document.execCommand("BackgroundImageCache", false, true); 
function Class(properties){
    var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};
    _class.prototype = properties;
    return _class;
}
var Sys = {
 IE : navigator.userAgent.toLowerCase().match(/msie ([\d.]+)/),
 Firefox : navigator.userAgent.toLowerCase().match(/firefox\/([\d.]+)/),
 Chrome : navigator.userAgent.toLowerCase().match(/chrome\/([\d.]+)/),
 IE6 : document.all&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6),
 IE7 : document.all&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 7),
 IE8 : document.all&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 8)
} 
var wt = {
elm: null,
$ : function(id,p){
var arr = id.split(" ");
this.elm = arr.length == 1?document.getElementById(id):document.getElementById(arr[0]).getElementsByTagName(arr[1]);
return p?this.elm:wt;
},
$$ : function(o,v,p){
this.elm = v?o.getElementsByTagName(v):o;
return p?this.elm:wt;
},
$G : function(i,p){
this.elm = this.elm[i];
return p?this.elm:wt;
},
$C : function(o){
this.elm = document.createElement(o);
return wt;
},
$R : function(){
this.elm.parentNode.removeChild(this.elm);
return wt;
},
Html : function(str){
this.elm.innerHTML = str;
return wt;
},
Attr : function(k,v,p){
if(typeof k == "string")
{
if(!v)
{
if(this.elm.getAttribute(k)&&this.elm.getAttribute(k)!="[object]")
return this.elm.getAttribute(k);
else
return this.elm[k];
}
if(!Sys.IE6&&!Sys.IE7&&typeof v=="object")
this.elm[k]=v;
else
this.elm.setAttribute(k,v);
return wt;
}
if(typeof k == "object")
for(var pro in k)this.elm.setAttribute(pro,k[pro]);
return wt;
},
appendTo : function(p){
p.appendChild(this.elm);
return wt;
},
insertBefore : function(old){
old.parentNode.insertBefore(this.elm,old);
return wt;
},
Css : function(k,v){
if(typeof k == "string")
{
if(!v)return this.CurrentStyle(this.elm)[k];
this.elm.style[k] = v ; 
return wt;
}
if(typeof k == "object")
for(var pro in k)this.elm.style[pro] = k[pro];
return wt;
},
Class : function(v){
this.elm.className = v;
return wt; 
},
getTarget : function(e){
return e.srcElement||e.target;
},
AddListener : function(e,fn){
this.elm.addEventListener?this.elm.addEventListener(e,fn,false):this.elm.attachEvent("on" + e,fn);
return wt;
},
RemoveListener : function(e,fn){
this.elm.removeEventListener?this.elm.removeEventListener(e,fn,false):this.elm.detachEvent("on" + e,fn);
return wt;
},
Bind : function(o,fn,args){
return function(){
return fn.apply(o,args||[]);
}
},
BindAsEventListener : function(o,fn,args){
return function(event){
return fn.apply(o,[event||window.event].concat(args));
}
},
Extend : function(destination, source){
for (var property in source) {
destination[property] = source[property];
}
},
Bubble : function(e){
Sys.IE?(e.cancelBubble=true):(e.stopPropagation());
},
CurrentStyle : function(){
return element.currentStyle || document.defaultView.getComputedStyle(element, null);
}
};
var Tab = new Class({
options :{
Link   : "",
hover  : "hover",
telm   : "li",
celm   : "div",
Event  : "mousedown",
tip    : "tip",
ID     : 0,
Max    : 8,           //最多有多少项
Min    : 1,   //最少有多少项
icostyle : "ico",
oninit : function(){},
onchange : function(){},
onadd : function(){}
},
initialize : function(titles,contents,options){
this.titles = titles;       //列表头元素集
this.contents = contents;   //显示内容元素集
this.hoverobj = null;       //记录鼠标移上去的元素
this.isdrag = false;       //是否拖动
wt.Extend(this.options,options);
wt.Extend(this,this.options);
this.tip = wt.$C("div").appendTo(document.body).Class(this.tip).elm;
for(var i = 0,l = this.titles.length;i<l;i++)
{
var s =this.ID==i?{display:"block"}:{display:"none"};
var ico = wt.$C("div").insertBefore(this.titles[i].childNodes[0]);
ico.Class(this.icostyle).Css(s).AddListener('mousedown',wt.BindAsEventListener(this,this.remove,[ico.elm.parentNode]));
wt.$$(titles).$G(i).Attr("contact",this.contents[i])
this.addEvent(wt.$$(titles).$G(i));
}
this.ID = this.titles[0];
},
addEvent : function(o){
o.AddListener(this.Event,wt.Bind(this,this.change,[o.elm])).AddListener('mousedown',wt.BindAsEventListener(this,this.drag,[o.elm]))
o.AddListener('mouseover',wt.Bind(this,this.Hover,[o.elm])).AddListener('mouseout',wt.Bind(this,this.out,[o.elm]))
o.AddListener('keyup',wt.BindAsEventListener(this,this.Key,[o.elm]));//加如键盘事件
},
change : function(o){
if(this.ID == o) return;
var d = wt.$$(this.ID).Attr("contact");
var s = wt.$$(o).Attr("contact");
if(o.contact)
{
wt.$$(d).Css("display","none");
wt.$$(this.ID).Class(this.Link);
wt.$$(this.ID,"div").$G(0).Css("display","none");
}
wt.$$(s).Css("display","block");
wt.$$(o).Class(this.active);
wt.$$(o,"div").$G(0).Css("display","block")
this.ID = o;
this.onchange();
},
add : function(t,c){
if(this.titles.length == this.Max) return;
var c = wt.$C(this.celm).appendTo(this.contents[0].parentNode).Html(c).Css("display","none").elm;
var elm = wt.$C(this.telm).appendTo(this.titles[0].parentNode).Html(t).Class(this.Link).Attr("contact",c);
this.addEvent(elm);
this.Reset();
var ico = wt.$C("div").insertBefore(this.titles[this.titles.length-1].childNodes[0]);
ico.Class(this.icostyle).AddListener('mousedown',wt.BindAsEventListener(this,this.remove,[ico.elm.parentNode]));
this.onadd();
},
remove : function(e,o){
wt.Bubble(e);
if(this.titles.length == this.Min) return;
wt.$$(o).$R();
wt.$$(o.contact).$R();
this.Reset();
this.change(this.titles[0]);
},
Reset : function(){
this.contents = wt.$$(this.contents[0].parentNode,this.celm,1);
this.titles = wt.$$(this.titles[0].parentNode,this.telm,1);
},
drag : function(e,o){
this.ms = wt.BindAsEventListener(this,this.move,[o]);
this.ss = wt.Bind(this,this.Stop);
wt.$$(document.documentElement).AddListener('mousemove',this.ms).AddListener('mouseup',this.ss);
this.isdrag = true;
},
move : function(e,o){
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
var top = Sys.Chrome?document.body.scrollTop:document.documentElement.scrollTop;
wt.$$(this.tip).Html(o.childNodes[1].nodeValue).Css({display:"block",top:(e.clientY+10+top+"px"),left:(e.clientX+8+"px")});
},
Stop : function(){
wt.$$(document.documentElement).RemoveListener('mousemove',this.ms).RemoveListener('mouseup',this.ss);
wt.$$(this.tip).Css("display","none");
if(this.hoverobj)
{
wt.$$(this.ID).insertBefore(this.hoverobj);
wt.$$(this.hoverobj).Class(this.Link);
this.hoverobj = null;
}
this.isdrag = false;
},
Hover : function(o){
if(!this.isdrag||o == this.ID) return;
wt.$$(o).Class(this.hover);
this.hoverobj = o;
},
out : function(o){
if(!this.isdrag||o == this.ID) return;
wt.$$(o).Class(this.Link);
this.hoverobj = null;
},
Key : function(e,o){
alert('a');
}
});
//===============================================================================================================
var ss=null;
window.onload = function(){
ss = new Tab(wt.$('t li',1),wt.$('c div',1),{isover:true,active:"active",hover:"hover"});
}
function add(t,c){
ss.add(t,"<iframe style='margin:10px;border:1px dashed #CCCCCC;  width:98%; height:96%' frameborder='0' src='"+c+"'></iframe>");
}</script>
</body>
</html>

解决方案 »

  1.   

    先赞一个,代码比以前越发幽雅了!读起来更爽(比以前来说)然后提个问题,选项卡看上去像副标题,鼠标放上去也是文本变化,不点或者不看代码还真不知道有功能测试环境:IE6  chrome
      

  2.   

    感觉不太可能，除非监听整个tab，但是这样就没意义了
      

  3.   

    很不错啊，
    ：
    页面刚打开时，可能第二个tab还没加载完，点击无法切换，
      

  4.   

    开始设计上的失误，以及美工实在不行
    new类 是在window.onload里面
    页面不加载完无法点击
    也是设计上的失误,第一次应该只加载一个,其他的应该在点击的时候在加载.............
      

  5.   

    很不错，顶下，不过刚开始加载慢还以为是点不动呢。。
    另外tab的添加和关闭挺好的，就是不知道什么时候用得上