<html> <head> <meta charset="utf-8"> <title>简单选项卡</title> <style type="text/css"> body,ul,li{margin:0;padding:0;} body{font:12px/1.5 Tahoma;} #outer{width:450px;margin:10px auto;} #tab{overflow:hidden;zoom:1;background:#000;border:1px solid #000;} #tab li{float:left;color:#fff;height:30px;cursor:pointer;line-height:30px;list-style-type:none;padding:0 20px;} #tab li.current{color:#000;background:#ccc;} #content{border:1px solid #000;border-top-width:0;} #content ul{line-height:25px;display:none;margin:0 30px;padding:10px 0;} </style> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { var timeid; $("#tab").find("li").each(function (index) { var sLi = $(this); sLi.mouseenter(function () { timeid = setTimeout(function () { sLi.addClass("current").siblings().removeClass("current"); sLi.parent().next().find("ul:eq(" + index + ")").show().siblings().hide(); }, 300); }).mouseleave(function () { clearTimeout(timeid); }) }) }) </script> </head> <body> <div id="outer"> <ul id="tab"> <li class="current">科技</li> <li>旅游</li> <li>娱乐</li> </ul> <div id="content"> <ul style="display:block;"> <li>宏碁R7双转轴变形本评测：触摸板设计过于另类(图)</li> <li> 超薄加防水 索尼Xperia Tablet Z平板电脑评测</li> <li>诺基亚Lumia 925评测 最好的WP8智能手机</li> <li> 联想IdeaPad S405评测 性能主流续航待提升</li> <li>小辣椒M2智能手机评测: 再不换壳我们就该老了</li> <li>联想K900内部构造 看国产神器多少国产货(组图)</li> <li>联想K900内部构造 看国产神器多少国产货(组图)</li> <li>网页换肤效果</li> <li>联想K900内部构造 看国产神器多少国产货(组图)</li> </ul> <ul> <li>爱上西雅图，美国全景游精选推荐 </li> <li>爱上西雅图，美国全景游精选推荐 </li> <li>爱上西雅图，美国全景游精选推荐 </li> <li>爱上西雅图，美国全景游精选推荐 </li> <li>爱上西雅图，美国全景游精选推荐 </li> <li>爱上西雅图，美国全景游精选推荐 </li> <li>爱上西雅图，美国全景游精选推荐 </li> <li>爱上西雅图，美国全景游精选推荐 </li> <li>爱上西雅图，美国全景游精选推荐 </li> <li>爱上西雅图，美国全景游精选推荐 </li> <li>爱上西雅图，美国全景游精选推荐 </li> <li>爱上西雅图，美国全景游精选推荐 </li> <li>爱上西雅图，美国全景游精选推荐 </li> </ul> <ul> <li>李安宣布辞拍美剧《暴君》：需要休息</li> <li>李安宣布辞拍美剧《暴君》：需要休息</li> <li>李安宣布辞拍美剧《暴君》：需要休息</li> <li>李安宣布辞拍美剧《暴君》：需要休息</li> <li>李安宣布辞拍美剧《暴君》：需要休息</li> <li>李安宣布辞拍美剧《暴君》：需要休息</li> <li>李安宣布辞拍美剧《暴君》：需要休息</li> <li>李安宣布辞拍美剧《暴君》：需要休息</li> <li>李安宣布辞拍美剧《暴君》：需要休息</li> <li>李安宣布辞拍美剧《暴君》：需要休息</li> <li>李安宣布辞拍美剧《暴君》：需要休息</li> </ul> </div> </div> </body> </html>