jquery tab选项卡插件 轻量级tab选项卡插件支持鼠标滑过、点击、自动切换、数据回调等功能



96 380 127



特效描述:选项卡插件 tab选项卡 鼠标滑过 点击 自动切换 数据回调,jquery tab插件制作多功能选项卡,鼠标滑过切换选项卡、鼠标点击切换选项卡、自动切换选项卡、支持数据回调功能,也可以与其他插件结合jquery.lazyload,制作选项卡切换图片延迟加载等优化浏览器功能。

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/tab.lib.js"></script>

2. HTML代码

<div class="cont">
<div class="main">
<h2>切换</h2>  
<h3>垂直滚动 点击触发</h3>  
    <div class="testtab" id="testtab">
    	<div id="tabtag" class="tabtag" style="position:relative;">
        	<ul>
            	<li class="cur">jquery 特效</li>
                <li>javascript 特效</li>
                <li>css 特效</li>
                <li>html5 特效</li>
            </ul>
        </div>
        <div id="tabcon" class="tabcon">
        	<div>
            	<ul> 
                    <li><a href="http://www.17sucai.com/">jquery特效制作banner图片滚动播放、按钮控制图片滚动、选项卡等基于多功能jquery slide插件</a></li>
                    <li><a href="http://www.17sucai.com/">jQuery特效插件:Tablesorter 2.0 表格用户体验内容筛选与分页筛选</a></li> 
                    <li><a href="http://www.17sucai.com/">jquery特效插件Validform制作一行代码搞定整站的表单验证</a></li>  
                    <li><a href="http://www.17sucai.com/">jquery特效制作 slide 图片窗帘式滚动</a></li>                     
                </ul> 
            </div>
            <div>
            	<ul> 
                    <li><a href="http://www.17sucai.com/">javascript特效按钮控制图片左右自动滚动</a></li>
                    <li><a href="http://www.17sucai.com/">javascript特效多功能选项卡自动切换内容图片延迟加载</a></li> 
                    <li><a href="http://www.17sucai.com/">javascript特效图片滚动插件支持单排图片上下滚动、图片无缝滚动</a></li>  
                    <li><a href="http://www.17sucai.com/">javascript特效网页banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>
				</ul>
            </div>
            <div>
            	<ul>
                    <li><a href="http://www.17sucai.com/">纯CSS下拉菜单</a></li>
                    <li><a href="http://www.17sucai.com/">CSS3的动画按钮泡泡</a></li>
                    <li><a href="http://www.17sucai.com/">用CSS3更换一个确认对话框的jQuery</a></li>
                    <li><a href="http://www.17sucai.com/">使用jQuery制作更好的selcet选择元素和CSS3</a></li>                    
                </ul>
            </div>
            <div>
            	<ul> 
                    <li><a href="http://www.17sucai.com/">制作CSS3和HTML5的一个单页网站模板</a></li>
                    <li><a href="http://www.17sucai.com/">一个HTML5的幻灯片基于jQuery框架</a></li> 
                    <li><a href="http://www.17sucai.com/">旋转幻灯片使用jQuery和CSS3</a></li>                  
                </ul>
            </div>
        </div>
    </div>
    <pre>
    $("#testtab").tab({tabId:"#tabtag", //切换控制器的ID
	tabTag:"li",  //切换控制器标签
	conId:"#tabcon", //内容容器ID
	conTag:"div",  //容器标签
	act:"click", //点击触发 也可以不设置 默认就为click 设置为 mouseover则为划过
	effact: "scrolly" //效果为纵向滚动
	})
    </pre>
<h3>水平滚动 点击触发 设置起始显示序列</h3>      
    <div class="testtab" id="testtab2">
    	<div id="tabtag2" class="tabtag" style="position:relative;">
        	<ul>
            	<li class="cur">jquery 特效</li>
                <li>javascript 特效</li>
                <li>css 特效</li>
                <li>html5 特效</li>
            </ul>
        </div>
        <div id="tabcon2">
        	<div>
            	<a href="http://www.17sucai.com/"><img width="620" height="340" alt="用jquery特效制作图片金字塔式放大缩小展示" src="images/aa6d7f26f941d87728eb0716d36d9cbe.jpg" /></a>
            </div>
            <div>
            	<a href="http://www.17sucai.com/"><img width="620" height="340" alt="javascript特效图片滚动插件支持单排图片上下滚动、图片无缝滚动" src="images/838718c6c6e0707250734cfe9e046cee.jpg" /></a>
            </div>
            <div>
            	<a href="http://www.17sucai.com/"><img width="620" height="340" alt="CSS3的动画按钮泡泡" src="images/df8440960f45b0ad68fe4d1c684e2acc.jpg" /></a>
            </div>
            <div>
            	<a href="http://www.17sucai.com/"><img width="620" height="340" alt="旋转幻灯片使用jQuery和CSS3" src="images/6b87a0e9c81c16b2cd43bc4a2879c2d0.jpg" /></a>
            </div>
        </div>
    </div>
    <pre>
    $("#testtab2").tab({tabId:"#tabtag2", //切换控制器的ID
	tabTag:"li", //切换控制器标签
	conId:"#tabcon2", //内容容器ID
	conTag:"div", //容器标签
	act:"click", //点击触发 也可以不设置 默认就为click 设置为 mouseover则为划过
	effact: "scrollx", //横向滚动效果
	<strong>dft:2</strong> //设置起始显示序列
	})
    </pre>
<h3>无效果 自动切换</h3>     
    <div class="testtab" id="testtab3">
    	<div id="tabtag3" class="tabtag" style="position:relative;">
        	<ul>
            	<li class="cur">jquery 特效</li>
                <li>javascript 特效</li>
                <li>css 特效</li>
                <li>html5 特效</li>
            </ul>
        </div>
        <div id="tabcon3" class="tabcon">
        	<div>
            	<ul> 
                    <li><a href="http://www.17sucai.com/">jquery特效制作banner图片滚动播放、按钮控制图片滚动、选项卡等基于多功能jquery slide插件</a></li>
                    <li><a href="http://www.17sucai.com/">jQuery特效插件:Tablesorter 2.0 表格用户体验内容筛选与分页筛选</a></li> 
                    <li><a href="http://www.17sucai.com/">jquery特效插件Validform制作一行代码搞定整站的表单验证</a></li>  
                    <li><a href="http://www.17sucai.com/">jquery特效制作 slide 图片窗帘式滚动</a></li>                     
                </ul> 
            </div>
            <div>
            	<ul> 
                    <li><a href="http://www.17sucai.com/">javascript特效按钮控制图片左右自动滚动</a></li>
                    <li><a href="http://www.17sucai.com/">javascript特效多功能选项卡自动切换内容图片延迟加载</a></li> 
                    <li><a href="http://www.17sucai.com/">javascript特效图片滚动插件支持单排图片上下滚动、图片无缝滚动</a></li>  
                    <li><a href="http://www.17sucai.com/">javascript特效网页banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>
				</ul>
            </div>
            <div>
            	<ul>
                    <li><a href="http://www.17sucai.com/">纯CSS下拉菜单</a></li>
                    <li><a href="http://www.17sucai.com/">CSS3的动画按钮泡泡</a></li>
                    <li><a href="http://www.17sucai.com/">用CSS3更换一个确认对话框的jQuery</a></li>
                    <li><a href="http://www.17sucai.com/">使用jQuery制作更好的selcet选择元素和CSS3</a></li>                    
                </ul>
            </div>
            <div>
            	<ul> 
                    <li><a href="http://www.17sucai.com/">制作CSS3和HTML5的一个单页网站模板</a></li>
                    <li><a href="http://www.17sucai.com/">一个HTML5的幻灯片基于jQuery框架</a></li> 
                    <li><a href="http://www.17sucai.com/">旋转幻灯片使用jQuery和CSS3</a></li>                  
                </ul>
            </div>
        </div>
    </div>
    <pre>
    $("#testtab3").tab({tabId:"#tabtag3",
	tabTag:"li",
	conId:"#tabcon3",
	conTag:"div",
	<strong>auto:true,</strong>
	act:"mouseover"
	})	
    </pre>
<h3>“slow” 缓慢滚动效果</h3>     
    <div class="testtab" id="testtab4">
    	<div id="tabtag4" class="tabtag" style="position:relative;">
        	<ul>
            	<li class="cur">jquery 特效</li>
                <li>javascript 特效</li>
                <li>css 特效</li>
                <li>html5 特效</li>
            </ul>
        </div>
        <div id="tabcon4">
        	<div>
            	<a href="http://www.17sucai.com/"><img width="620" height="340" alt="用jquery特效制作图片金字塔式放大缩小展示" src="images/aa6d7f26f941d87728eb0716d36d9cbe.jpg" /></a>
            </div>
            <div>
            	<a href="http://www.17sucai.com/"><img width="620" height="340" alt="javascript特效图片滚动插件支持单排图片上下滚动、图片无缝滚动" src="images/838718c6c6e0707250734cfe9e046cee.jpg" /></a>
            </div>
            <div>
            	<a href="http://www.17sucai.com/"><img width="620" height="340" alt="CSS3的动画按钮泡泡" src="images/df8440960f45b0ad68fe4d1c684e2acc.jpg" /></a>
            </div>
            <div>
            	<a href="http://www.17sucai.com/"><img width="620" height="340" alt="旋转幻灯片使用jQuery和CSS3" src="images/6b87a0e9c81c16b2cd43bc4a2879c2d0.jpg" /></a>
            </div>
        </div>
    </div>
    <pre>
    $("#testtab4").tab({tabId:"#tabtag4",
	tabTag:"li",
	conId:"#tabcon4",
	conTag:"div",
	<strong>effact: "slow"</strong>
	})	
    </pre>
	<h3>普通选项卡</h3>     
    <div class="testtab" id="testtab5">
    	<div id="tabtag5" class="tabtag" style="position:relative;">
        	<ul>
            	<li class="cur">jquery 特效</li>
                <li>javascript 特效</li>
                <li>css 特效</li>
                <li>html5 特效</li>
            </ul>
        </div>
        <div id="tabcon5" class="tabcon">
        	<div>
            	<ul> 
                    <li><a href="http://www.17sucai.com/">jquery特效制作banner图片滚动播放、按钮控制图片滚动、选项卡等基于多功能jquery slide插件</a></li>
                    <li><a href="http://www.17sucai.com/">jQuery特效插件:Tablesorter 2.0 表格用户体验内容筛选与分页筛选</a></li> 
                    <li><a href="http://www.17sucai.com/">jquery特效插件Validform制作一行代码搞定整站的表单验证</a></li>  
                    <li><a href="http://www.17sucai.com/">jquery特效制作 slide 图片窗帘式滚动</a></li>                     
                </ul> 
            </div>
            <div>
            	<ul> 
                    <li><a href="http://www.17sucai.com/">javascript特效按钮控制图片左右自动滚动</a></li>
                    <li><a href="http://www.17sucai.com/">javascript特效多功能选项卡自动切换内容图片延迟加载</a></li> 
                    <li><a href="http://www.17sucai.com/">javascript特效图片滚动插件支持单排图片上下滚动、图片无缝滚动</a></li>  
                    <li><a href="http://www.17sucai.com/">javascript特效网页banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>
				</ul>
            </div>
            <div>
            	<ul>
                    <li><a href="http://www.17sucai.com/">纯CSS下拉菜单</a></li>
                    <li><a href="http://www.17sucai.com/">CSS3的动画按钮泡泡</a></li>
                    <li><a href="http://www.17sucai.com/">用CSS3更换一个确认对话框的jQuery</a></li>
                    <li><a href="http://www.17sucai.com/">使用jQuery制作更好的selcet选择元素和CSS3</a></li>                    
                </ul>
            </div>
            <div>
            	<ul> 
                    <li><a href="http://www.17sucai.com/">制作CSS3和HTML5的一个单页网站模板</a></li>
                    <li><a href="http://www.17sucai.com/">一个HTML5的幻灯片基于jQuery框架</a></li> 
                    <li><a href="http://www.17sucai.com/">旋转幻灯片使用jQuery和CSS3</a></li>                  
                </ul>
            </div>
        </div>
    </div>
    <pre>
    $("#testtab5").tab({tabId:"#tabtag5",
	tabTag:"li",
	conId:"#tabcon5",
	conTag:"div"
	})	
    </pre>
</div>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 滑动星星打分 其他 选项卡自动切换 鼠标滑过 鼠标悬停 跟随鼠标移动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到