<body> <div class="dwcontainer"> <ul class="tabs"> <li class="active" style="padding: 0px;"><a href="#tab1" class="index_rank_head">总价地王排行榜</a></li> <li style="padding: 0px;"><a href="#tab4" class="index_rank_head">单价地王排行榜</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content" style="display: block;"> <div> 11 </div> </div> <div id="tab4" class="tab_content" style="display: none;"> <div> 22 </div> </div> </div> </div> </body>
<style> .dwcontainer { width: 500px; margin: 0 auto; } .dwcontainer ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 32px; border-bottom: 1px solid #fff; border-left: 1px solid #fff; width: 100%; } .dwcontainer ul.tabs li { float: left; margin: 0; padding: 0; height: 31px; line-height: 31px; border: 1px solid #fff; border-left: none; margin-bottom: -1px; background: #e0e0e0; overflow: hidden; position: relative; } .dwcontainer ul.tabs li a { text-decoration: none; color: #000; display: block; font-size: 1.2em; padding: 0 10px; border: 1px solid #fff; outline: none; } .dwcontainer ul.tabs li a:hover { background: #ccc; color: red; } .dwcontainer ul.tabs li.active, html ul.tabs li.active a:hover { background: #fff; border-bottom: 1px solid #fff; color: red; } .dwcontainer .tab_container { border: 1px solid #fff; border-top: none; clear: both; float: left; background: #fff; -moz-border-radius-bottomright: 5px; -khtml-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -khtml-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; } .dwcontainer .tab_content { padding: 10px; font-size: 1.2em; } .dwcontainer .tab_content h2 { font-weight: normal; padding-bottom: 10px; border-bottom: 1px dashed #ddd; font-size: 1.8em; } .dwcontainer .tab_content h3 a { color: #254588; } </style>
封装的切换框架的js
tabchange.js
(function(){ if(!window.project){ window.project={} } window.project={ change:function(){ //Default Action $(".tab_content").hide(); //Hide all content $("ul.tabs li:first").addClass("active").show(); //Activate first tab $(".tab_content:first").show(); //Show first tab content //On Click Event $("ul.tabs li").click(function () { $("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active content return false; }); } } })();
页面调用
<script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
<script type="text/javascript" src="js/tabchange.js" ></script>
<script>
$(function(){
project.change();
})