simple_accordions TAB标签导航效果[五]

人气：　来源：dezinerfolio　作者：佚名　所属栏目：导航类　[切换到繁體中文]

介绍：美观的TAB标签特效，共有五种标签效果供选择，此为第五种效果。

演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>站长手册_特效演示_simple_accordions TAB标签导航效果[五]</title>
<style><!--body,td{font-size: 12px;}--></style>
<style type="text/css">
* {
	margin:0;
	padding:0;
	list-style:none;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	margin:10px;
}

#basic-accordian{
	border:5px solid #EEE;
	padding:5px;
	width:340px;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-175px;
	z-index:2;
	margin-top:-100px;
}

.accordion_headings{
	padding:5px;
	background:#99CC00;
	color:#FFFFFF;
	border:1px solid #FFF;
	cursor:pointer;
	font-weight:bold;
}

.accordion_headings:hover{
	background:#00CCFF;
}

.accordion_child{
	padding:15px;
	background:#EEE;
}

.header_highlight{
	background:#00CCFF;
}

.tab_container *{
	float:left;
	width:100px;
}

</style>
<script type="text/javascript" src="http://www.zzsc.org/texiao/zzsc_demo/simple_accordions_with_src/accordian.pack.js"></script>
</head>
<body bgcolor="" onload="new Accordian('basic-accordian',5,'header_highlight');">
<table width="100%" height="1000" border="0" cellpadding="10" cellspacing="5">
<tr>
<td valign="top">
<div id="basic-accordian" ><!--Parent of the Accordion-->


<div class="tab_container">
  <div id="test1-header" class="accordion_headings header_highlight" >Home</div>
  <div id="test2-header" class="accordion_headings" >About Us</div>
  <div id="test3-header" class="accordion_headings" >Download</div>
</div>

<div style="float:left;">
  <div id="test1-content">
	<div class="accordion_child">
    	Welcome to the Homepage<br /><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sapien nibh, ultrices vitae, convallis eu, semper ut, leo. Cras nec pede.
    </div>
  </div>
  
  <div id="test2-content">
	<div class="accordion_child">
    	Here you will find more about us<br /><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sapien nibh, ultrices vitae, convallis eu, semper ut, leo. Cras nec pede.
    </div>
  </div>
  
  <div id="test3-content">
	<div class="accordion_child">
    	and... this is the download section<br /><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sapien nibh, ultrices vitae, convallis eu, semper ut, leo. Cras nec pede.
    </div>
  </div>
</div>

</div><!--End of accordion parent-->
</td>
</tr>
</table>
</body>
</html>

[Ctrl+A全选提示：你可先修改部分代码，再按运行]

下面教你如何应用此特效： JS文件下载　　accordian.pack.js　　accordian-src.js
　--------------------------------------------------------------------------------------
　　需要在<body 这里>加入的代码：onload="new Accordian('basic-accordian',5,'header_highlight');"
　--------------------------------------------------------------------------------------

以下代码加到<head>…</head>中

以下代码加到<body>…</body>中

#basic-accordian{
border:5px solid #EEE;
padding:5px;
width:340px;
position:absolute;
left:50%;
top:50%;
margin-left:-175px;
z-index:2;
margin-top:-100px;
}

.accordion_headings{
padding:5px;
background:#99CC00;
color:#FFFFFF;
border:1px solid #FFF;
cursor:pointer;
font-weight:bold;
}

.accordion_headings:hover{
background:#00CCFF;
}

.accordion_child{
padding:15px;
background:#EEE;
}

.header_highlight{
background:#00CCFF;
}

.tab_container *{
float:left;
width:100px;
}

</style>
<script type="text/javascript" src="http://www.zzsc.org/texiao/zzsc_demo/simple_accordions_with_src/accordian.pack.js"></script>

<div class="tab_container">
  <div id="test1-header" class="accordion_headings header_highlight" >Home</div>
  <div id="test2-header" class="accordion_headings" >About Us</div>
  <div id="test3-header" class="accordion_headings" >Download</div>
</div>

<div style="float:left;">
  <div id="test1-content">
<div class="accordion_child">
     Welcome to the Homepage<br /><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sapien nibh, ultrices vitae, convallis eu, semper ut, leo. Cras nec pede.
    </div>
  </div>

  <div id="test2-content">
<div class="accordion_child">
     Here you will find more about us<br /><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sapien nibh, ultrices vitae, convallis eu, semper ut, leo. Cras nec pede.
    </div>
  </div>

  <div id="test3-content">
<div class="accordion_child">
     and... this is the download section<br /><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sapien nibh, ultrices vitae, convallis eu, semper ut, leo. Cras nec pede.
    </div>
  </div>
</div>