清华大佬耗费三个月吐血整理的几百G的资源,免费分享!....>>>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>tabTemplate.html</title> </head> <style> div{margin: 0px; padding: 0px;} /*标签背景,间距*/ .title{width:100%;height:24px;margin-top:1px;float:left;background:url("images/head_bg.png") repeat-x;} .titleMargin{cursor:pointer;float:left;margin-left:3px;} .title:after{_content:''; } .tabLeft{float:left;margin:2px 0 0 0;} .tabMid{color:#064687;background:url("images/tabs_active_center.gif") repeat-x;padding:4px 0 0 0;float:left;margin-top:2px;} .tabRight{float:left;margin-top:2px;} a{text-decoration: none;} a:hover{color:red;} a:visited{color:#064687;} .isDisplayYColor a{color:red;} .isDisplayYColor a:visited{color:red;} .isDisplayNColor a{color:#064687;} .isDisplayY {display:block;} .isDisplayN {display:none;} /*内容*/ .wrap{border: 1px solid #ccc;} </style> <body> <!-- 页面内容显示区域 --> <div class="wrap"> <div class="title"></div> <div class="content"></div> </div> <SCRIPT type="text/javascript" src="common/javascripts/jquery/jquery.js"></SCRIPT> <SCRIPT type=text/javascript>jQuery.noConflict();</SCRIPT> <SCRIPT type="text/javascript" src="tabTemplate.js"></SCRIPT> <script type="text/javascript"> /** * 使用方式,新建一个js文件: * var tabs = new Array(); tabs[数组下标]={ tabid:'first', tabname:'第一个tab', tabsrc:'firsthtml.html', isDisplay:'n' }; * @2012-07-06 */ jQuery(function(){ var title = jQuery('.title'); var content = jQuery('.content'); for(var i=0;i<tabs.length;i++){ var targettab = tabs[i]; if(typeof(targettab) != "undefined"){ //标签部分 var tabOutter = jQuery("<div class='"+targettab.tabid+"' onclick='changetab(this);'></div>").addClass("titleMargin"); var isDisplayColor = "" ; var isDisplay = "" ; if(targettab.isDisplay=='y'){ isDisplayColor = "isDisplayYColor"; isDisplay = "isDisplayY" ; }else{ isDisplayColor = "isDisplayNColor"; isDisplay = "isDisplayN" ; } var tabInner = jQuery("<div class='tabLeft'>" + "<img src='images/tabs_active_left.gif'/>" + "</div>" + "<div class='tabMid "+isDisplayColor+"'>" + "<a href='#'>"+targettab.tabname+"</a>" + "</div>" + "<div class='tabRight'>" + "<img src='images/tabs_active_right.gif'/>" + "</div>"); title.append(tabOutter.append(tabInner)); //内容部分 var tabContent = jQuery("<div class='"+isDisplay+" "+targettab.tabid+"_content'>" + "<iframe name='content_frame' marginwidth=0 marginheight=0 width=100% height=100% src='"+targettab.tabsrc+"' frameborder=0></iframe>" + "</div>"); content.append(tabContent); } }; }) function changetab(tab){ jQuery.each(jQuery('.titleMargin'),function(){ //移除标题部分的样式 jQuery(this).children(".tabMid").removeClass("isDisplayYColor").removeClass("isDisplayNColor"); //获取内容展示部分的class var contentClassName = getContentClassName(jQuery(this).attr('class')); //移除内容部分的样式 jQuery("."+contentClassName+"").removeClass("isDisplayY").removeClass("isDisplayN").addClass("isDisplayN"); }); var targettab = jQuery(tab); //添加标题展示样式 targettab.children(".tabMid").addClass("isDisplayYColor"); var contentClassName = getContentClassName(targettab.attr('class')); //添加内容展示样式 jQuery("."+contentClassName+"").removeClass("isDisplayN").addClass("isDisplayY"); } function getContentClassName(classNames){ alert(classNames); var className = classNames.substring(0,classNames.indexOf(" ")); var contentClassName = className+"_content"; return contentClassName; } </script> </body> </html>