とても実用的なJQueryのタブはソースコードを切り替えます
26090 ワード
<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>