<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>