与我联系

jquery实现防止数据泛滥加载的常用选项卡

2015-5-14 一诺 js+jquery+ajax

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>



标签: 常用选项卡

分享这篇文章
赞助鼓励:如果觉得内容对您有所帮助,您可以支付宝(左)或微信(右):

声明:如无特殊注明,所有博客文章版权皆属于作者,转载使用时请注明出处。谢谢!

发表评论:

皖ICP备15010162号-1 @2015 勿恨水长东
qq:1614245331 邮箱:13515678147@163.com Powered by
emlog