代码显示效果如上图所示；

需求说明：

在实际需求中，会遇到这样的情况：不仅是要展示选项卡的内容，而且还有可能在选项卡中需求顾客填写相关内容，而这些内容是顾客如果想了解更深层次的，就会继续填写右边的内容；如果顾客只是看看，那么他就不会填写，鼠标离开右边这块，或者点击一下dom,右边就自动消失。所以在做这个选项卡的时候就要注意定时器的应用；

代码效果说明：

分为左边和又边，当鼠标滑到左边的各个盒子的时候，右边对应的盒子内容就出现，出现1秒后，如果鼠标没有移入右边的盒子，那么右边的内容盒子就在1秒后自动消失；如果鼠标移入右边的盒子时，右边的盒子就不会消失；当鼠标点击dom的时候，右边的盒子也可以消失；

代码展示如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .left{float:left}

         .right{float:left;margin-left:200px;width:300px;height:300px;position:relative}

         .left div{width:100px;height:60px;margin-top:50px;}

         .right div{width:300px;height:300px;margin-top:50px;display: none;position:absolute;left:0;top:0}

         .color1{background:#c0a16b}

         .color2{background: #00b4ff}

         .color3{background: #78b907}

     </style>

     <script src="js/jquery-3.1.0.min.js"></script>

     <script>

         $(function() {

             var timer=null;

             //当进入的时候，让右边对应的显示,注意清除计时器

             $(".left").children().each(function (index) {

                 $(this).on("mouseenter", function () {

                     clearTimeout(timer)

                     $(".right").children().eq(index).css("display", "block").siblings().css("display", "none")

                 }).on("click",function(event){

                     event.stopPropagation();//点击的时候阻止上面的事件继续发生

                 })

             });

             $(".left").children().each(function (index) {

                     $(this).on("mouseout", function () {

                         timer=setTimeout(function(){

                             $(".right").children().eq(index).css("display", "none").siblings().css("display", "none")

                         },1000)

                     });

                 });

 //            当进入右边的时候，让他不消失

             $(".right").find("div").each(function(){

                 $(this).on("mouseenter",function(){

                     clearTimeout(timer)

                     $(this).css("display", "block").siblings().css("display", "none")

                 }).on("mouseout",function(){

                     $(this).css("display", "none").siblings().css("display", "none")

                 })

             })

 //            点击dom的时候，让右边的消失

             $(document).on("click",function(index){

                 $(".right").children().eq(index).css("display", "none").siblings().css("display", "none")

             })

         })

     </script>

 </head>

 <body>

 <div class="left">

     <div class="box1 color1">盒子1</div>

     <div class="box2 color2">盒子2</div>

     <div class="box3 color3">盒子3</div>

 </div>

 <div class="right">

     <div class="cont1 color1">盒子1对应的内容</div>

     <div class="cont2 color2">盒子2对应的内容</div>

     <div class="cont3 color3">盒子3对应的内容</div>

 </div>

 </body>

 </html>

tab栏切换的特殊效果（类似网易的登陆栏效果）的更多相关文章

  1. tab栏切换的特殊效果

    在实际的开发过程中,我们可能会遇到这种需求,如下图 左边是三个tab栏,右边是显示内容的div,当鼠标滑到坐标的tab上时,给它一个高亮显示,让它对应的内容在右边的div中显示出来,当鼠标移出的时候把 ...

  2. 类似网易新闻 title栏 滚动时 文字放大&变色

    http://files.cnblogs.com/files/n1ckyxu/ScrollTitleView.zip

  3. Android Design Support Library（一）用TabLayout实现类似网易选项卡动态滑动效果

    这里我们用TabLayout来实现这一效果.TabLayout是Android Design Support Library库中的控件.Google在2015的IO大会上,给我们带来了更加详细的Mat ...

  4. jQuery带有定时器的tab栏切换

    现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图: 新浪的tab栏切换 淘宝的tab栏切换 其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务 ...

  5. dataTable tab栏切换时错位解决办法

    做后台管理类网站肯定要写列表,首选dataTable,功能强大 最近在做一个tab栏切换时发现了一个很诡异的事情:表头错位了! 主要时因为当table被隐藏后,table的header宽度会计算错乱, ...

  6. [javascript]switchTab:仿腾讯首页Tab栏切换js插件

    腾讯首页的每个新闻栏目都是一个tab选项卡切换,属于延迟动作的:鼠标hover上去之后200毫秒才会切换,防止了因为浏览滑动导致的页面上选项卡的频繁切换.仿照这样的效果,自己写了一个js插件,实现了低 ...

  7. tab栏切换

    最简单的tab栏切换 html部分 <ul class="tab"> <li class="item">待支付(1)</li> ...

  8. tab栏切换制作

    tab栏切换制作 先上图 要求1:默认状态,第一个选项卡被选中,展示第一个选项卡的内容 策略:第一个选项卡默认有被选中的样式,第一个选项卡对应的display: block,其他的dispaly设为n ...

  9. ES6面向对象实现tab栏切换效果

    面向对象实现tab栏切换效果

随机推荐

  1. Linux下ps命令

    简述 Linux中的ps命令是Process Status的缩写.ps命令用来列出系统中当前运行的那些进程.ps命令列出的是当前那些进程的快照,就是执行ps命令的那个时刻的那些进程,动态的显示进程信息 ...

  2. JS模块化编程之AMD规范（转）

    随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分工协作.进度管理.单元测试等等......开发者 ...

  3. sort方法的使用、随机数的产生

    如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序. var arr = ['a','b','m','c','d']; arr.sort(); ...

  4. DOMContentLoaded事件

    今天查看百度空间源代码,发现多了个util.js文件,打开看看.里面里面定义了addDOMLoadEvent.这是干什么用的? 仔细查看代码,发现在Mozilla添加了DOMContentLoaded ...

  5. 【原创】Linux下编译链接中常见问题总结

    前言 一直以来对Linux下编译链接产生的问题没有好好重视起来,出现问题就度娘一下,很多时候的确是在搜索帮助下解决了BUG,但由于对原因不求甚解,没有细细研究,结果总是在遇到在BUG时弄得手忙脚乱得. ...

  6. 利用 Ant 和 Eclipse 有效地提高部署工作效率

    读者定位为具有 Java 和 Ant 使用经验的开发人员. 读者可以学习到如何使用 Ant 解决一些多用户开发环境中,根据不同的目标环境编译成不同部署包的问题. 工作场景 现在有一个 web 项目,是 ...

  7. LoadRunner error -27257

    检查点函数 web_reg_find("Search=body", "savecount=num", "Text=test1", LAST) ...

  8. js与C#服务端 json数据交互

    1.1 服务端返回给前端 返回的数据都放入对象中(根据需求:单个对象,集合,键值对),然后JSON序列化返回给前端.这里可以引用JSON.NET 库,也可以用.NET自带的类库: JavaScript ...

  9. 从今天开始写博客、托管代码到 Github

    最近看了一篇文章,译名<简历危险>,原名<Resumes are dangerous>. 作者为Alex Maccaw,他有一篇文章曾经在网上流传甚广——<Traveli ...

  10. unity3d Human skin real time rendering 真实模拟人皮实时渲染（转）

    先放出结果图片...由于网上下的模型是拼的,所以眼皮,脸颊,嘴唇看起来像 存在裂痕,解决方式是加入曲面细分和置换贴图 进行一定隆起,但是博主试了一下fragment shader的曲面细分,虽然细分成 ...