jquery tab选项卡，支持垂直选项卡滚动、水平选项卡滚动、自动选项卡切换
支离破碎 2014-06-30
支持垂直选项卡滚动、水平选项卡滚动、自动选项卡切换
图片就不上了，很多效果，直接看演示
演示地址:http://www.corange.cn/demo/3803/index.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/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>jquery tab选项卡，支持垂直选项卡滚动、水平选项卡滚动、自动选项卡切换-www.corange.cn</title>
<style type="text/css">
*{margin:0px;padding:0px;list-style-type:none;}
a{color:#35679a;text-decoration:none;}
a:hover{color:#c00;text-decoration:underline;}
a,img{border:none;}
body{text-align:left;background:#505050;font-size:12px;font-family:Arial, Helvetica, sans-serif;}
.cont{background:#080808;padding:8px;width:840px;margin:0 auto;}
.main{background:#eee;padding:6px;}
h2{font-size:16px;font-family:"黑体";color:#35679a;;padding:4px 10px;margin:10px 0 16px;font-weight:100;border-bottom:2px solid #ccc;}
h3{padding-left:50px;font-size:16px;color:#555;}
.testtab{border:4px solid #ccc;margin:10px 50px;}
.tabtag{line-height:24px;height:24px;border-bottom:2px solid #ccc;}
.tabtag li{float:left;width:24%;text-align:center;background:#eee;}
.tabtag li.cur{color:#900;background:#fff;}
.tabcon{height:100px;overflow:hidden;}
.tabcon div{height:100px;color:#900;font-size:14px;}
#tabcon2,#tabcon4{height:340px;overflow:hidden;}
.tabcon li{line-height:25px;padding:0 0 0 10px;}
pre{color:#444;}
pre strong{font-weight:900;}
</style>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="js/tab.lib.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/* 垂直滚动 点击触发 */
$("#testtab").tab({
tabId:"#tabtag",tabTag:"li",conId:"#tabcon",conTag:"div",act:"click",effact: "scrolly", dft:0
});
/* 水平滚动 点击触发 设置起始显示序列 */
$("#testtab2").tab({
tabId:"#tabtag2",tabTag:"li",conId:"#tabcon2",conTag:"div",act:"mouseover",effact: "scrollx",dft:0
});
/* 无效果 自动切换 */
$("#testtab3").tab({
tabId:"#tabtag3",tabTag:"li",conId:"#tabcon3",conTag:"div",auto:true,act:"mouseover"
});
/* slow 缓慢滚动效果 */
$("#testtab4").tab({
tabId:"#tabtag4",tabTag:"li",conId:"#tabcon4",conTag:"div",effact: "slow",act:"mouseover"
});
/* 选项卡切换 */
$("#testtab5").tab({
tabId:"#tabtag5",tabTag:"li",conId:"#tabcon5",conTag:"div",act:"mouseover"
});
});
</script>
</head>
<body>
<div align="center"><a href="../../archives/2011/12/3803.html"><h2>jquery tab选项卡，支持垂直选项卡滚动、水平选项卡滚动、自动选项卡切换</h2></a></div>
<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="">jquery特效制作banner图片滚动播放、按钮控制图片滚动、选项卡等基于多功能jquery slide插件</a></li>
<li><a href="">jQuery特效插件:Tablesorter 2.0 表格用户体验内容筛选与分页筛选</a></li>
<li><a href="">jquery特效插件Validform制作一行代码搞定整站的表单验证</a></li>
<li><a href="">jquery特效制作 slide 图片窗帘式滚动</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="">javascript特效按钮控制图片左右自动滚动</a></li>
<li><a href="">javascript特效多功能选项卡自动切换内容图片延迟加载</a></li>
<li><a href="">javascript特效图片滚动插件支持单排图片上下滚动、图片无缝滚动</a></li>
<li><a href="">javascript特效网页banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="">纯CSS下拉菜单</a></li>
<li><a href="">CSS3的动画按钮泡泡</a></li>
<li><a href="">用CSS3更换一个确认对话框的jQuery</a></li>
<li><a href="">使用jQuery制作更好的selcet选择元素和CSS3</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="">制作CSS3和HTML5的一个单页网站模板</a></li>
<li><a href="">一个HTML5的幻灯片基于jQuery框架</a></li>
<li><a href="">旋转幻灯片使用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=""><img width="620" height="340" alt="用jquery特效制作图片金字塔式放大缩小展示" src="../demo1.jpg" /></a>
</div>
<div>
<a href=""><img width="620" height="340" alt="javascript特效图片滚动插件支持单排图片上下滚动、图片无缝滚动" src="../demo2.jpg" /></a>
</div>
<div>
<a href=""><img width="620" height="340" alt="CSS3的动画按钮泡泡" src="../demo3.jpg" /></a>
</div>
<div>
<a href=""><img width="620" height="340" alt="旋转幻灯片使用jQuery和CSS3" src="../demo4.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="">jquery特效制作banner图片滚动播放、按钮控制图片滚动、选项卡等基于多功能jquery slide插件</a></li>
<li><a href="">jQuery特效插件:Tablesorter 2.0 表格用户体验内容筛选与分页筛选</a></li>
<li><a href="">jquery特效插件Validform制作一行代码搞定整站的表单验证</a></li>
<li><a href="">jquery特效制作 slide 图片窗帘式滚动</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="">javascript特效按钮控制图片左右自动滚动</a></li>
<li><a href="">javascript特效多功能选项卡自动切换内容图片延迟加载</a></li>
<li><a href="">javascript特效图片滚动插件支持单排图片上下滚动、图片无缝滚动</a></li>
<li><a href="">javascript特效网页banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="">纯CSS下拉菜单</a></li>
<li><a href="">CSS3的动画按钮泡泡</a></li>
<li><a href="">用CSS3更换一个确认对话框的jQuery</a></li>
<li><a href="">使用jQuery制作更好的selcet选择元素和CSS3</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="">制作CSS3和HTML5的一个单页网站模板</a></li>
<li><a href="">一个HTML5的幻灯片基于jQuery框架</a></li>
<li><a href="">旋转幻灯片使用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=""><img width="620" height="340" alt="用jquery特效制作图片金字塔式放大缩小展示" src="../demo1.jpg" /></a>
</div>
<div>
<a href=""><img width="620" height="340" alt="javascript特效图片滚动插件支持单排图片上下滚动、图片无缝滚动" src="../demo2.jpg" /></a>
</div>
<div>
<a href=""><img width="620" height="340" alt="CSS3的动画按钮泡泡" src="../demo3.jpg" /></a>
</div>
<div>
<a href=""><img width="620" height="340" alt="旋转幻灯片使用jQuery和CSS3" src="../demo4.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="">jquery特效制作banner图片滚动播放、按钮控制图片滚动、选项卡等基于多功能jquery slide插件</a></li>
<li><a href="">jQuery特效插件:Tablesorter 2.0 表格用户体验内容筛选与分页筛选</a></li>
<li><a href="">jquery特效插件Validform制作一行代码搞定整站的表单验证</a></li>
<li><a href="">jquery特效制作 slide 图片窗帘式滚动</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="">javascript特效按钮控制图片左右自动滚动</a></li>
<li><a href="">javascript特效多功能选项卡自动切换内容图片延迟加载</a></li>
<li><a href="">javascript特效图片滚动插件支持单排图片上下滚动、图片无缝滚动</a></li>
<li><a href="">javascript特效网页banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="">纯CSS下拉菜单</a></li>
<li><a href="">CSS3的动画按钮泡泡</a></li>
<li><a href="">用CSS3更换一个确认对话框的jQuery</a></li>
<li><a href="">使用jQuery制作更好的selcet选择元素和CSS3</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="">制作CSS3和HTML5的一个单页网站模板</a></li>
<li><a href="">一个HTML5的幻灯片基于jQuery框架</a></li>
<li><a href="">旋转幻灯片使用jQuery和CSS3</a></li>
</ul>
</div>
</div>
</div>
<pre>
$("#testtab5").tab({tabId:"#tabtag5",
tabTag:"li",
conId:"#tabcon5",
conTag:"div"
})
</pre>
</div>
</div>
</body>
</html>
原文地址:http://www.corange.cn/archives/2011/12/3803.html
