TAB效果，五个，竖排横排，左右打开等等你想要的都有

来源：互联网发布：sql模糊查询[] 编辑：程序博客网时间：2024/04/29 11:53

http://www.corange.cn//uploadfiles/1002-5_52519.jpg

http://www.corange.cn//uploadfiles/1002-55_84369.jpg

http://www.corange.cn//uploadfiles/1002-56_54368.jpg

http://www.corange.cn//uploadfiles/1002-57_95987.jpg

<!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=utf-8" />
<title>corange.cn</title>
<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:350px;
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;
}

</style>
<script type="text/javascript" src="accordian.pack.js"></script>
</head>
<body onload="new Accordian('basic-accordian',5,'header_highlight');">

<div id="basic-accordian" >


<div id="test-header" class="accordion_headings header_highlight" >Home</div>



<div id="test-content">


<div class="accordion_child">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ligula nisl, egestas non, pharetra vel, scelerisque accumsan, lacus. Proin nibh. Aenean dapibus. Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.<br /><br /> Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.
</div>

</div>



<div id="test1-header" class="accordion_headings" >About Us</div>



<div id="test1-content">


<div class="accordion_child">
ASP,PHP,JSP,JS,ASP.NET,DIV,CSS等网站建设相关技术<a href="http://www.corange.cn">www.corange.cn</a>
</div>

</div>



<div id="test2-header" class="accordion_headings" >Downloads</div>



<div id="test2-content">


<div class="accordion_child">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ligula nisl, egestas non, pharetra vel, scelerisque accumsan, lacus. Proin nibh. Aenean dapibus. Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.<br />
</div>

</div>


</div>

</body>
</html>
五个文件打包下载
http://www.corange.cn//uploadfiles/simple_accordions_with_src_64662.rar