<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
body{ background:#996; margin:0;}
.tabPannel{ width:650px; margin:10px auto;}
.tabPannel ul.tabGroup{ margin:0; padding:0; list-style:none;}
.tabPannel ul.tabGroup li.tab{ white-space:nowrap; padding:0 5px; line-height:1.8em; float:left; margin:0 5px; background:#69F;}
.tabPannel div.tabContent{ height:350px; clear:both; display:none; }
.tabPannel ul.tabGroup li.selectedTab{ background:#fff;}
.tabPannel div.selectedContent{ display:block; background:#fff;}
.high{ color:red; font-weight:bold; }
</style>
</head>
<body>
<div id="tabPannel" class="tabPannel">
<ul class="tabGroup" ><li class="tab selectedTab">选项一</li><li class="tab">选项二</li>
<li class="tab">选项三</li>
<li class="tab high">选项四</li><li class="tab">选项五</li></ul>
<div class="tabContent selectedContent">内容一</div>
<div class="tabContent">内容二
<div >
<ul><li>中国</li><li>中国</li><li>中国</li><li>中国</li><li>中国</li><li>中国</li><li>中国</li></ul>
</div>
</div>
<div class="tabContent">内容三</div>
<div class="tabContent">内容四</div>
<div class="tabContent">内容五</div>
</div>
<div id="tabPanne3" class="tabPannel">
<ul class="tabGroup" ><li class="tab selectedTab">选项一</li><li class="tab">选项二</li>
<li class="tab">选项三</li>
<li class="tab">选项四</li><li class="tab">选项五</li></ul>
<div class="tabContent selectedContent">内容一</div>
<div class="tabContent">内容二
<div >
<ul><li>中国</li><li>中国</li><li>中国</li><li>中国</li><li>中国</li><li>中国</li><li>中国</li></ul>
</div>
</div>
<div class="tabContent">内容三</div>
<div class="tabContent">内容四</div>
<div class="tabContent">内容五</div>
</div>
<div id="tabPanne4" class="tabPannel">
<ul class="tabGroup" ><li class="tab selectedTab">选项一</li><li class="tab">选项二</li>
<li class="tab">选项三</li>
<li class="tab">选项四</li><li class="tab">选项五</li></ul>
<div class="tabContent selectedContent">内容一</div>
<div class="tabContent">内容二
<div >
<ul><li>中国</li><li>中国</li><li>中国</li><li>中国</li><li>中国</li><li>中国</li><li>中国</li></ul>
</div>
</div>
<div class="tabContent">内容三</div>
<div class="tabContent">内容四</div>
<div class="tabContent">内容五</div>
</div>
</body>
</html>
<script src="jquery-1.7.1.js"></script>
<script>
$(".tabPannel>ul>li.tab").click(function(){
$(this).addClass("selectedTab").siblings().removeClass("selectedTab");
var index=$(this).index();
var oDivs=$(this).parent().siblings();
oDivs.eq(index).addClass("selectedContent").siblings().removeClass("selectedContent");
})
</script>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
