简单的js模拟tab选项卡
本想做成一个扩展性好的,结果做来做去总是不理想 , 慢慢来吧 , 先把做好的保存一下 ,css很粗糙....
<html><head><title></title><style type="text/css"><!--#TabPage{position:absolute;left: 400px;top: 200px;height: 400px;width: 300px;border-color: blue;border: solid 1px;background-color: lightblue;}#Tab{position: absolute;left:0;top:0;width: 100%;height: 30px;border-color: red;border: solid 1px;font-size: 12px;color: blue;}.subTab{float: left;width: 60px;height:100%; }#Page{position: absolute;left: 0;top: 31px;width: 100%;border-color: black;border:solid 1px;background-color: white;}--></style><script type="text/javascript"><!--var str = "";var zIndex = 0;var tabpage; /* function _Tab(tabName){ this.Nodes = []; this.tabName = tabName;}function _Page(pageName){ this.pageName = pageName; this.Nodes = [];}*/function _TabPage(){ //tabpage有两个子数组, 分别标识有几个tab和page,以及其对应关系.根据索引对应. this.tabs = []; this.pages = [];}function _Tab (id ,title ,url ){ this.id = id; this.title = title; this.url = url; }function _Page (id , title , tabId){ this.id = id; this.title = title; this.tabId = tabId;} _TabPage.prototype.add = function(_tab , _page){ if(!_tab || !_page) return;//如果有一个为空 , 就不用做操作了. //initpage. var tab = document.createElement("div"); tab.id = _tab.id; //添加鼠标经过事件 , //tab.onmouseover = function (tabId){this.showCurrentPage();}; tab.attachEvent('onmouseover',function(){var srcE = event.srcElement;var tabId = srcE.id; for(var i = 0 ; i < $('Page').childNodes.length ;i++){ $('Page').childNodes.style.display = 'none'; }for(var i = 0 ; i <$('Page').childNodes.length;i++){ if(tabId ==$('Page').childNodes.tabId){$('Page').childNodes.style.display = 'block';return;}}}); if(_tab.className) tab.className = _tab.className; else tab.className = 'subTab'; //tab.innerHTML = _tab.url ? '<a href="' + _tab.url + '">' + _tab.title + '</a>' : _tab.title; tab.innerHTML = _tab.title; this.tabs = _tab; document.getElementById('Tab').appendChild(tab); var page = document.createElement("div"); page.id = _page.id; page.tabId = _page.tabId; if(_page.className) page.className = _page.className; page.innerHTML = _page.title; page.style.display = 'none'; this.pages = page; document.getElementById('Page').appendChild(page);this.pages.style.display = 'block';} function createTabPage(id ,title , url){ var tab = new _Tab(id ,title,url); //page中的内容应该是一个jsp页面. var page = new _Page('p1','内容' + (zIndex++) , tab.id); tabpage.add(tab , page);}function page_init(){ tabpage = new _TabPage(); $('Page').style.height = $('TabPage').offsetHeight - $('Tab').offsetHeight; createTabPage('0','个人信息','./empInfo.do?method='); createTabPage('1','单位信息','./empInfo.do?method=');}function $(id){ return document.getElementById(id);}//显示当前tab对应的page_TabPage.prototype.showCurrentPage=function (tabId){ alert(tabId);for(var i = 0 ; i < $('Page').childNodes.length ;i++){ $('Page').childNodes.style.display = 'none';alert($('Page').childNodes.tabId);} for(var i = 0 ; i <$('Page').childNodes.length ;i++){if(tabId ==$('Page').childNodes.tabId){$('Page').childNodes.length = 'block';return;}}}window.onload = page_init;//--></script></head><body ><div id="TabPage" class="TabPage"> <div id="Tab" class="Tab"> </div> <div id="Page" class="Page"> </div></div></body></html>
页:
[1]