jQuery实现选项卡切换效果简单演示

前端之家收集整理的这篇文章主要介绍了jQuery实现选项卡切换效果简单演示前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了jQuery实现选项卡切换效果简单演示代码分享给大家供大家参考。具体如下:

运行效果图如下

一、主体程序

选项卡
  • 政治
  • 体育
  • Box">
    实事内容
    政治内容
    体育内容

    二、CSS样式

    初步布局代码

    div{ width: 300px; height: 200px; border: #333333 solid; border-width: 0 1px 1px 1px; }

    上面的代码实现布局如下:

    但是我们只需要一个框架里面的内容进行显示,所以在上面代码的前提下添加一些小代码辅助就可以了~~~~~~

    进一步布局样式代码

    div{ width: 300px; height: 200px; border: #333333 solid; border-width: 0 1px 1px 1px; display: none; //将三个内容框架全隐藏,通过下面的:first-child属性只将第一个框架内容显示出来 } .tab .tab_Box > div:first-child{ display: block; }

    上面程序给.tab .tab_Box > div样式多添加了一个display:none,另外还通过:first-child属性只将第一个框架内容显示出来~~~~~~这样我们看到的布局就和我上面刚开始放的动画效果图保持一致了,布局也算是完成了~~~~~~

    三、Jquery代码

    div").eq(index).show().siblings().hide(); //在按钮选中时在下面显示相应的内容,同时隐藏不需要的框架内容 }); });

    希望本文所述对大家学习jquery程序设计有所帮助。

    猜你在找的jQuery相关文章