JavaScript浏览器选项卡效果

有图如下：

代码如下： 复制代码代码如下：/* head html : span/span body html : iframe/iframe */var Tab=function(id、title、url、isClose){ this。id=idthis . title=title this . URL=URL this。head=jQuery(' span class=' tab-head ' '这个。title '/span ')；这个。body=jQuery(' iframe name=' IFM ' this。id ' ' src=' http : '这。URL ' '框架边框=0 class=' tab-body '/iframe ').hide()；isClose(这个。close=jQuery(' span class=' tab-head-closeBtn '/span ')，这个。closeBtn())；};选项卡。prototype={ closeBtn : function(){ var self=this；self.close.bind('mouseover '，function(){ jQuery(this)).添加类(' tab-closeBtn-hover ')；});self.close.bind('mouseout '，function(){ jQuery(this)).移除类(' tab-closeBtn-hover ')；});自我。头部。追加(自我。关闭)；}，GetFocus :函数(){ this。头部。add CLaSS(' tab-head-active ')；这个。尸体。show()；}，LoseFocus :函数(){ this。头部。移除类(' tab-head-active ')；这个。尸体。hide()；}，destory :函数(){这个。头部。移除()；这个。尸体。移除()；}, };/*标题html : divspan/spanspan/span./div正文html : div frame/iframe iframe/iframe./div */var TabView=函数（容器){ this.container=containerthis。head=jQuery(' div class=' tabView-head '/div ')；这个。body=jQuery(' div class=' tabView-body '/div ')；这个。tab=[]；这个。taBiD=0；this.focusTab=nullthis。init()；};tabview。prototype={ init : function(){ this。集装箱。追加(这个。头).追加(这个。身体)；},添加：函数(标题、url、isClose){ var self=this；var标签=新标签(self.tabId、title、url、isClose)；自我_tabEvents(制表符);(自我。选项卡。长度==0)(制表符。getfocus()、self。focustab=tab)；自我。选项卡。推送(tab)；自我。头部。追加(选项卡。头)；自我。尸体。追加(选项卡。身体)；self.tabId}，remove_ref :函数(tab){ var self=this；for(var I=0；我自己。选项卡。长度；I){ if(tab。id===self。标签1 .id){ tab。destory()；自我。选项卡。拼接(，1)；返回我；} } return-1；}，destory :函数(){这个。头部。移除()；这个。尸体。移除()；}，tabEvents :函数(tab){ var self=this；tab.head.bind('click '，function(){ if(self.focusTab.id！=tab。id){ tab。GetFocus()；自我。FocusTab。loseffocus()；self . FocusTab=tab } })；tab.close tab.close.bind('click '，function(){ tab。destory()；var I=自我。remove _ ref(选项卡)；if(tab。id==self。FocusTab。id){//如果关闭的是当前的tab if(self。选项卡。长度==0){//如果所有标签都已关闭自我。destory()；} else { var next index=self。选项卡。长度==I？I-1 : I；自我。focustab=self。tab[下一个索引]；自我。FocusTab。GetFocus()；} } });}, };