<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> *{margin:0px;padding:0px;} body{font-size:12px;} .box{margin:10px;padding:10px;} .box h3{margin:10px 0px;border-bottom:1px solid red;padding-bottom:10px;} .box p{line-height:20px;} .tabbox{margin:10px;} .tabbox .tabhead{float:left;list-style:none;margin-right:-1px;} .tabbox .tabhead li{80px;height:30px;cursor:pointer;line-height:30px;padding:0px 5px;border:1px solid #aaccff;margin-bottom:-1px;border-right:0px;} .tabbox .tabhead li.selected{background-color:#aaccff;color:White;font-weight:bold;} .tabbox .tabcontent{float:left;border:1px solid #aaccff;padding:10px;min-height:200px;600px;background-color:#aaccff;} .tabbox .tabcontent div{display:none;line-height:20px;} .tabbox .tabcontent div.selected{display:block;} </style> <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script> <script type="text/javascript"> $(function(){ $(".tabhead li").click(function(){ $(".tabhead li").siblings().removeClass("selected") $(this).addClass("selected") var a = $(this).index() //alert(a) $(".tabcontent div").eq(a).siblings().removeClass("selected") $(".tabcontent div").eq(a).addClass("selected") }) }) </script> </head> <body> <div class="box"> <h3>试题要求</h3> <p> 1.完成选项卡切换功能，其中html和css已经给出，只需写出相应的js代码即可 </p> </div> <div class="tabbox"> <ul class="tabhead"> <li class="selected">选项卡一</li> <li>选项卡二</li> <li>选项卡三</li> <li>选项卡四</li> </ul> <div class="tabcontent"> <div class="selected">内容一</div> <div>内容二</div> <div>内容三</div> <div>内容四</div> </div> </div> </body> </html>
