jQuery Tab切换插件Tabulous.js使用示例

关于Tabulous.js

Tabulous.js 是一个实现了Tab标签切换功能的 jQuery 插件，轻量级插件，简单且易于使用。它所生成的Tab标签可通过 CSS 来自定义样式，同时它也提供了多种切换效果。

如何使用Tabulous.js

首先在页面中加入 jQuery 框架和 Tabulous.js 插件

 代码如下 复制代码
<link href='tabulous.css' rel='stylesheet' type='text/css'>
<script src="jquery.min.js"></script>
<script src="tabulous.js"></script>

然后添加Tab标签的HTML结构，如

 代码如下 复制代码

<div id="tabs">
<ul>
<li><a href="#tabs-1" title="">Tab 1</a></li>
<li><a href="#tabs-2" title="">Tab 2</a></li>
</ul>
<div id="tabs_container">
<div id="tabs-1">
<!--内容内容-->
</div>
<div id="tabs-2">
<!--内容内容-->
</div>
</div>
</div>

最后对其初始化即可

 代码如下 复制代码

$('#tabs').tabulous({
effect: 'scale'
});
时间： 2024-10-03 00:25:15

jQuery Tab切换插件Tabulous.js使用示例的相关文章

jQuery tab切换

jQuery tab切换,如下代码: (function($){        $.HoverTabs=function(options){            var ops=$.extend($.HoverTabs.defaults,options);            this.tabs=ops.tabs;            this.tabContents=ops.tabContents;            this.curIndex=0;            this.

jQuery图片切换插件jquery.cycle.js使用示例_jquery

Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. 复制代码 代码如下: <head> <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script type="text/javascri

jQuery列表框插件imageselect.js jquery select美化用图片进行选择

 select默认的太难看了,在这用jquery 插件imageselect.js进行美化,就图片进行下拉菜单的选择 列表框插件imageselect.js jquery select美化用图片进行选择-jquery select 美化"> 这个网页特效代码如下:   <!DOCTYPE html> <head> <title>支持图片选择的jQuery列表框插件imageselect.js</title> <meta http-equ

jquery图片切换插件

 本文给大家分享的是一则使用jQuery实现图片切换的插件,效果非常不错,兼容性也很好,推荐给大家,有需要的小伙伴快来参考下吧.       代码如下: /** * 图片切换插件 * Dependence jquery-1.7.2.min.js **/ (function ($) { //调用方式 $('#silder').imgSilder({s_width:564, s_height:293, is_showTit:true, s_times:3000,css_link:'css/style

基于jquery tab切换(防止页面刷新)_jquery

在网上找了很多jquery效果,都是这样的,于是自己写了一个.防止页面刷新的tab切换, html代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

jquery图片切换插件_jquery

复制代码 代码如下: /**  * 图片切换插件  * Dependence jquery-1.7.2.min.js  **/ (function ($) {   //调用方式 $('#silder').imgSilder({s_width:564, s_height:293, is_showTit:true, s_times:3000,css_link:'css/style.css'});  容器必须加入 id silder_list or class silder_list   /*参考结构

漂亮的jQuery tab选项卡插件

jQuery tab插件 结构:  代码如下 复制代码 <div class="tabWrap">   <ul class="tabBox">   <li><a href="#nogo">tab1 </a></li>   <li><a href="#nogo">tab2 </a></li>   <li&

jQuery 图片切换插件(代码比较少)_jquery

复制代码 代码如下: // JavaScript Document ;(function($){ $.fn.extend({ "zj_ppt":function(value){ //默认参数定义 var $this = $(this); value = $.extend({ "time":2000, //间隔变化动画时间 "con":0, "sto":true, "count":"count&qu

使用基于jquery的gamequery插件做JS乒乓球游戏_jquery

我建议大家先学会些基础的JS,再学jquery,这样会更好接受些新的东西.今天我们要试着做个js经典游戏,打乒乓球的游戏,这款游戏大概是我做得最多次的了,我有用过xna.flash.js都做过同一款.先上张截图,不然大伙还不知道是什么东西. 它的演示地址是:http://www.lovewebgames.com/demo/gamepingbang/ 采用的技术是jquery+gamequery, jquery大家都知道是什么了,本文重点介绍下gamequery,gamequery是一款jquer