jquery实现防止数据泛滥加载的常用选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery实现防止数据泛滥加载的常用选项卡</title>
<style>
body {
padding: 50px 200px;
color: #323200;
background: #669999;
line-height: 30px;
}
button {
padding: 5px 12px;
cursor:pointer;
}
.active {
background: yellow;
}
div {
width: 400px;
height: 200px;
background: #ccc;
padding: 10px;
display: none;
}
.show {
display: block;
}
</style>
</head>
<body>
<button class="active">but1</button>
<button>but2</button>
<button>but3</button>
<button>but4</button>
<br/>
<div class="show">生活，就是面对现实微笑，就是越过障碍注视未来；生活，就是用心灵之剪，在人生之路上裁出叶绿的枝头；生活
，就是面对困惑或黑暗时，灵魂深处燃起豆大却明亮且微笑的灯展</div>
<div>成熟的麦子低垂着头，那是在教我们谦逊；一群蚂蚁能抬走大骨头，那是在教我们团结；温柔的水滴穿岩石，那是在教我们坚韧
；蜜蜂在花丛中忙碌，那是在教我们勤劳。</div>
<div>思念是一首诗，让你在普通的日子里读出韵律来；思念是一阵雨，让你在枯燥的日子里湿润起来；思念是一片阳光，让你的阴郁
的日子里明朗起来。</div>
<div>品味生活，完善人性。存在就是机会，思考才能提高。人需要不断打碎自己，更应该重新组装自己。</div>
<!-- 使用jquery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function(){
// 使用定时器延迟加载,防止数据泛滥加载
var timeId=null;
$('button').hover(function(){
var _this=$(this);
timeId=setTimeout(function() {
_this.addClass('active').siblings().removeClass('active');
$('div').eq(_this.index()).addClass('show').siblings().removeClass('show');
}, 300);
},function(){
clearTimeout(timeId);
});
});
</script>
</body>
</html>
发表评论：