jquery那点事之写选项卡

来源：互联网发布：申请网络空间编辑：程序博客网时间：2024/05/17 02:25
<!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>
0 0