tab实现

tab实现

<!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>

你可能感兴趣的:(tab实现)