<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>tab實現 </TITLE>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#demo-nav a').bind('click',function(){
var id = this.id;
$('#demo-nav a').removeClass('active');
$('#'+id).addClass('active');
$('.tab').css('display','none');
$('#tab'+id).css('display','block');
})
});
</script>
<style type="text/css">
div.demolayout {
width:460px;
margin: 15px 0 0 20px;
padding:15px 0 0 30px;
background: url(/images/index-content-bg.png) no-repeat top center;
}
ul.demolayout {
list-style-type: none;
float: left;
margin:0px;
padding:0px;
}
ul.demolayout li {
margin: 0 0 0 0;
float: left;
border-bottom:1px solid #515151;
}
.tab{
padding:0 0 2px 0;
height: 160px;
text-align:left;
}
ul.demolayout a {
float: left;
display: block;
padding: 5px 25px;
border-bottom: 0;
color: #515151;
text-decoration: none;
font-size:14px;
font-weight: bold;
}
ul.demolayout a:hover {
background: #eee;
}
ul.demolayout a.active {
background: #515151;
padding-bottom: 5px;
cursor: default;
color:white;
}
.tabs-container {
clear: left;
padding:0px;
}
p.more_details{
padding:2px 2px 2px 2px;
font-size:11px;
}
</style>
</HEAD>
<BODY>
<div id="demo" class="demolayout">
<ul id="demo-nav" class="demolayout">
<li><a class="active" href="#tab1" id="1">活動資訊</a></li>
<li><a class="" href="#tab2" id="2">業態分布</a></li>
<li><a class="" href="#tab3" id="3">商家推薦</a></li>
</ul>
<div class="tabs-container">
<div style="display: block;" class="tab" id="tab1">
<p class="more_details">
活動資訊內容信息
</p>
</div>
<div style="display: none; " class="tab" id="tab2">
<p class="more_details">
業態分布內容信息
</p>
</div>
<div style="display: none; " class="tab" id="tab3">
<p id="comment" class="more_details">
商家推薦內容信息
</p>
</div>
</div>
</div>
</BODY>
</HTML>
posted on 2009-05-31 09:01
周銳 閱讀(261)
評論(0) 編輯 收藏 所屬分類:
CSS 、
JavaScript