JavaScript 브라우저 탭 효과_javascript 기술

有图如下:

代码如下:

复主代码 代码如下:

/*
head html :
본문 html:
*/
var Tab = function(id,title,url,isClose){
this.id = id;
this.title = 제목;
this.url = url;
this.head = jQuery('' this.title '');
this.body = jQuery('' ).숨다();
isClose && (this.close = jQuery('×'),this.closeBtn());
};
Tab.prototype = {
closeBtn : function(){
var self = this;
self.close.bind("mouseover",function(){
jQuery(this).addClass("tab-closeBtn-hover");
});
self.close.bind("mouseout",function(){
jQuery(this).removeClass("tab-closeBtn-hover");
});
self.head.append(self.close);
},
getFocus : function(){
this.head.addClass("tab-head-active");
this.body.show();
},
loseFocus : function(){
this.head.removeClass("tab-head-active");
this.body.hide();
},
destory : function(){
this.head.remove();
this.body.remove();
},
};
/*
head html :

...

본문 html:

...

*/
var TabView = function(container){
this.container = 컨테이너;
this.head = jQuery('

');
this.body = jQuery('

');
this.tabs = [];
this.tabId = 0;
this.focusTab = null;
this.init();
};
TabView.prototype = {
init : function(){
this.container.append(this.head).append(this.body);
},
add : function(title,url,isClose){
var self = this;
var tab = new Tab(self.tabId,title,url,isClose);
self._tabEvents(탭);
(self.tabs.length==0) && (tab.getFocus(),self.focusTab=tab);
self.tabs.push(탭);
self.head.append(tab.head);
self.body.append(tab.body);
self.tabId ;
},
remove_ref : function(tab){
var self = this;
for(var i=0;iif(tab.id===self.tabs[i].id){
tab.destory() ;
self.tabs.splice(i,1);
나를 돌려주세요;
}
}
return -1;
},
destory : function(){
this.head.remove();
this.body.remove();
},
_tabEvents : function(tab){
var self = this;
tab.head.bind("click",function(){
if(self.focusTab.id != tab.id){
tab.getFocus();
self.focusTab. lossFocus();
self.focusTab = 탭
}
});
tab.close && tab.close.bind("click",function(){
tab.destory();
var i = self.remove_ref(tab);
if(tab. id==self.focusTab.id){//如果关闭的是当앞의 탭
if(self.tabs.length==0){//如果所有tabPhoto已关闭
self.destory() ;
}else{
var nextIndex = self.tabs.length==i ? i-1 : i
self.focusTab = self.tabs[nextIndex]
self.focusTab.getFocus ();
}
}
});
},
};