jQuery封装的tab选项卡插件分享

前端之家收集整理的这篇文章主要介绍了jQuery封装的tab选项卡插件分享前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在网站开发中经常会用到选项卡功能,为了节省一下写代码时间,封装了一下tab插件,方便调用

创建选项卡组件

使用方法: html结构

  • js调用

    相关参数说明:

    参数默认值参数说明 activenull设置被选中的选项卡的索引,默认值为null,例如设置选中第一个选项卡则设置为0 eventclick选项卡的切换事件,默认为点击事件,可以设置mouSEOver

    添加选项卡参数

    参数默认值参数说明 title空选项卡显示的文本,默认为空 href空选项卡链接,如果为静态数据则填入对应的字符串(#str),远程数据则为对应的url content空选项卡为静态数据时的内容,动态数据则无需填写 iconClstrue选项卡关闭按钮,默认为显示true,不显示则为false

    Demo:

    例子1: 静态数据:

  • js调用

    例子2: 通过远程数据加载页面,则动态创建panel,

    js调用

    例子3: 传入参数,设置选项卡切换事件为mouSEOver

    js调用

    SEOver'});

    例子4: 添加选项卡:

    添加选项卡" onclick="addTab()">

    <div id="tabs">

    js调用:

    总结:

    通过不同的Id调用,就可以创建不同的tab结构,样式则通过id来自定义不同的样式即可。

    小弟不才.欢迎各位大神指教....

    Demo下载地址:

    以上所述就是本文的全部内容了,希望大家能够喜欢。

    原文链接:https://www.f2er.com/jquery/53820.html

    猜你在找的jQuery相关文章