基于jquery的tab函数示例[带源代码下载]

本文通过实例描述了基于jquery的tab函数。分享给大家参考，如下：

Jquery，一个杀手级的js框架，显然已经成为开发领域的标准js库，在开发一般web应用时经常用到。今天找到了一个实现jquery标签页的插件，效果还不错，比用javascript和css实现一个标签页好很多。用标签页美化界面，让不同类型的数据分布在不同的标签页，对用户体验来说是显而易见的。很直观，也避免了现在很多数据都在一个界面里，很臃肿，看起来很害怕。这个基于jquery的选项卡插件叫做：billy.carousel。让我们先来看看渲染图

看来效果还不错。

让我们看看jquery选项卡的html页面代码

！DOCTYPE html heartheta http-equiv=' Content-TYPe ' Content=' text/html；charset=utf-8 '/meta name=' description ' content=' jquery实现的制表符式图片切换效果'/title jquery实现的制表符式图片切换效果/title！-JS Includes-script src=' http : images/jquery . JS ' type=' text/JavaScript '/script script src=' http : images/Billy . carousel . jquery . min . JS ' type=' text/JavaScript '/script！-CSS包含-link rel='样式表' href='图像/演示. css' rel='外部no follow ' type=' text/CSS ' media=' screen '/title选项卡选项test /title/headbody脚本类型='text/javascript' $(文档)。ready(function() { $('#tabber '))。billy({ slidePause: 5000，indicator : $(' ul # tabber _ tab ')，customIndicators: true，autoAnimate: false，no animation : true })；});/script div id=' container ' h3jquery选项卡测试/h3 p单击选项卡页面进行切换/h3p！-选项卡标题-ul id=' tabber _ Tab ' lia href=' # 0 ' rel='外部nofollow '选项卡一/a/lilia href=' # 1' rel='外部nofollow '选项卡二/a/li lia href='#2' rel='外部nofollow '选项卡三/a/li lia href='#3' rel='外部nofollow '选项卡四/a/li /ul！-选项卡式内容区-div id=' tabber _ clip ' ul id=' tabber ' liimg src=' http : images/desert . jpg ' width=' 900 ' height=' 400 ' alt=' desert '/Li LiBr/我想要一套房子。面朝大海，春暖花开./Li liimg src=' http 3360 images/wood . jpg ' width=' 900 ' height=' 400 ' alt=' wood '/Li liimg src=' http 3360 images/Pond . jpg ' width=' 900 ' height=' 400 ' alt=' Pond '/Li/ul/div/div/body/html将相关的jquery文件引入head后，根据上面的例子，就可以做出标签页的样式，非常简单。如果需要调整样式，可以修改css。

点击这里下载代码。

更多对jQuery感兴趣的读者可以查看本网站的主题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》和《jquery选择器用法总结》

希望本文对大家的jQuery程序设计有所帮助。