直接配置使用tabs
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>tabTemplate.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</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">
/**
* 使用方式
* 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>
:leftjavascript
:centerhtml
:rightjava
:backgroundjquery
歡迎關注本站公眾號,獲取更多信息