jquery tab 水平tab分页

<script type="text/javascript" src="js/jquery.tab.js"></script>
<script type="text/javascript">
$(document).ready(function() {$("#tab").tab({//dft:0,  // 起始显示项,默认为第一项//auto:true,  // 自动切换,默认为关闭//act:"mouseover",  // 鼠标划过,默认为单击//effact:" scrollx",  // 横向滚动效果,纵向滚动为 scrolly//effact:"slow",  // "slow" 效果tabId: ".tags",  // 切换控制器tabTag: "li",  // 切换控制器标签conId: ".panes",  // 内容容器conTag: ".pane"  // 内容容器标签})
})
</script>

<div id="tab"><ul class="tags"><li>项目一</li><li>项目二</li><li>项目三</li></ul><div class="panes"><div class="pane"> 项目一内容 </div><div class="pane"> 项目二内容 </div><div class="pane"> 项目三内容 </div></div>
</div>

<!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 插件DEMO</title><style type="text/css">
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,table,td,th,form,fieldset,img,dl,dt,dd{margin: 0px;padding: 0px;font-family: Arial, Helvetica, sans-serif;
}a {color: #35679a;text-decoration: none;
}a:hover {color: #c00;text-decoration: underline;
}img {border: none;
}li {list-style: none;
}body {text-align: left;background: #505050;font-size: 12px;
}.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: 80px;padding: 10px;color: #900;font-size: 14px;
}.tabcon li {line-height: 22px;
}pre {color: #444;
}pre strong {font-weight: 900;
}
</style><script type="text/javascript"src="../js/jquery-1.3.2.min.js"></script><script type="text/javascript">/*           */$(document).ready(function() {function cur(ele, currentClass, tag) {ele = $(ele) ? $(ele) : ele;if (!tag) {ele.addClass(currentClass).siblings().removeClass(currentClass);} else {ele.addClass(currentClass).siblings(tag).removeClass(currentClass);}}$.fn.tab = function(options) {var org = {tabId : "",tabTag : "",conId : "",conTag : "",curClass : "cur",act : "click",dft : 0,effact : null,auto : false,autotime : 3000,aniSpeed : 500}$.extend(org, options);var t = false;var k = 0;var _this = $(this);var tagwrp = $(org.tabId);var conwrp = $(org.conId);var tag = tagwrp.find(org.tabTag);var con = conwrp.find(org.conTag);var len = tag.length;var taght = parseInt(tagwrp.css("height"));var conwh = conwrp.get(0).offsetWidth;var conht = conwrp.get(0).offsetHeight;var curtag = tag.eq(org.dft);//preparecur(curtag, org.curClass);con.eq(org.dft).show().siblings(org.conTag).hide();if (org.effact == "scrollx") {var padding = parseInt(con.css("padding-left"))+ parseInt(con.css("padding-right"));_this.css({"position" : "relative","height" : taght + conht + "px","overflow" : "hidden"});conwrp.css({"width" : len * conwh + "px","height" : conht + "px","position" : "absolute","top" : taght + "px"});con.css({"float" : "left","width" : conwh - padding + "px","display" : "block"});}if (org.effact == "scrolly") {var padding = parseInt(con.css("padding-top"))+ parseInt(con.css("padding-bottom"));_this.css({"position" : "relative","height" : taght + conht + "px","overflow" : "hidden"});tagwrp.css({"z-index" : 100})conwrp.css({"width" : "100%","height" : len * conht + "px","position" : "absolute","z-index" : 99})con.css({"height" : conht - padding + "px","float" : "none","display" : "block"});}tag.css({"cursor" : "pointer"}).each(function(i) {tag.eq(i).bind(org.act,function() {cur(this, org.curClass);k = i;switch (org.effact) {case "slow":con.eq(i).show("slow").siblings(org.conTag).hide("slow");break;case "fast":con.eq(i).show("fast").siblings(org.conTag).hide("fast");break;case "scrollx":conwrp.animate({left : -i * conwh + "px"}, org.aniSpeed);break;case "scrolly":conwrp.animate({top : -i * conht + taght+ "px"}, org.aniSpeed);break;default:con.eq(i).show().siblings(org.conTag).hide();break;//End of switch}})})if (org.auto) {var drive = function() {if (org.act == "mouseover") {tag.eq(k).mouseover();} else if (org.act == "click") {tag.eq(k).click();}k++;if (k == len)k = 0;}t = setInterval(drive, org.autotime);}//End of $.fn.tab   }//Drive$("#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 : "click",effact : "scrollx",dft : 2})$("#testtab3").tab({tabId : "#tabtag3",tabTag : "li",conId : "#tabcon3",conTag : "div",auto : true,act : "mouseover"})$("#testtab4").tab({tabId : "#tabtag4",tabTag : "li",conId : "#tabcon4",conTag : "div",effact : "slow",act : "mouseover"})})/*     */
</script></head><body><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">项目一</li><li>项目二</li><li>项目三</li><li>项目四</li></ul></div><div id="tabcon" class="tabcon"><div><ul><li><a href="#nogo">日之泉杯：寿战两球张晓彬世界波 金德4:2逆转胜绿城</a></li><li><a href="#nogo">投入超过国字号总和：09足协青少年足球预算500万</a></li><li><a href="#nogo">09中超期待十大焦点战：鲁沪巅峰PK江浙德比劲爆</a></li><li><a href="#nogo">泰达上下不惧魔鬼赛程 队员：早晚要打不如一锅端</a></li></ul></div><div><ul><li><a href="#nogo">日之泉杯：寿战两球张晓彬世界波 金德4:2逆转胜绿城</a><span>03/06</span></li><li><a href="#nogo">投入超过国字号总和：09足协青少年足球预算500万</a><span>03/06</span></li><li><a href="#nogo">09中超期待十大焦点战：鲁沪巅峰PK江浙德比劲爆</a><span>03/06</span></li><li><a href="#nogo">泰达上下不惧魔鬼赛程 队员：早晚要打不如一锅端</a><span>03/06</span>></li></ul></div><div><ul><li><a href="#nogo">日本影星集合可爱清纯于一身</a></li><li><a href="#nogo">中超联赛世界排名不敌新加坡</a></li><li><a href="#nogo">中超联赛世界排名不敌新加坡</a></li><li><a href="#nogo">中超联赛世界排名不敌新加坡</a></li></ul></div><div><ul><li><a href="#nogo">日之泉杯：寿战两球张晓彬世界波 金德4:2逆转胜绿城</a><span>03/06</span></li><li><a href="#nogo">投入超过国字号总和：09足协青少年足球预算500万</a><span>03/06</span></li><li><a href="#nogo">09中超期待十大焦点战：鲁沪巅峰PK江浙德比劲爆</a><span>03/06</span></li><li><a href="#nogo">泰达上下不惧魔鬼赛程 队员：早晚要打不如一锅端</a><span>03/06</span>></li></ul></div></div></div><pre>$("#testtab").tab({tabId:"#tabtag", //切换控制器的IDtabTag:"li",  //切换控制器标签conId:"#tabcon", //内容容器IDconTag:"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">项目一</li><li>项目二</li><li>项目三</li><li>项目四</li></ul></div><div id="tabcon2" class="tabcon"><div><ul><li><a href="#nogo">日之泉杯：寿战两球张晓彬世界波 金德4:2逆转胜绿城</a></li><li><a href="#nogo">投入超过国字号总和：09足协青少年足球预算500万</a></li><li><a href="#nogo">09中超期待十大焦点战：鲁沪巅峰PK江浙德比劲爆</a></li><li><a href="#nogo">泰达上下不惧魔鬼赛程 队员：早晚要打不如一锅端</a></li></ul></div><div><ul><li><a href="#nogo">日之泉杯：寿战两球张晓彬世界波 金德4:2逆转胜绿城</a><span>03/06</span></li><li><a href="#nogo">投入超过国字号总和：09足协青少年足球预算500万</a><span>03/06</span></li><li><a href="#nogo">09中超期待十大焦点战：鲁沪巅峰PK江浙德比劲爆</a><span>03/06</span></li><li><a href="#nogo">泰达上下不惧魔鬼赛程 队员：早晚要打不如一锅端</a><span>03/06</span>></li></ul></div><div><ul><li><a href="#nogo">日本影星集合可爱清纯于一身</a></li><li><a href="#nogo">中超联赛世界排名不敌新加坡</a></li><li><a href="#nogo">中超联赛世界排名不敌新加坡</a></li><li><a href="#nogo">中超联赛世界排名不敌新加坡</a></li></ul></div><div><ul><li><a href="#nogo">日之泉杯：寿战两球张晓彬世界波 金德4:2逆转胜绿城</a><span>03/06</span></li><li><a href="#nogo">投入超过国字号总和：09足协青少年足球预算500万</a><span>03/06</span></li><li><a href="#nogo">09中超期待十大焦点战：鲁沪巅峰PK江浙德比劲爆</a><span>03/06</span></li><li><a href="#nogo">泰达上下不惧魔鬼赛程 队员：早晚要打不如一锅端</a><span>03/06</span>></li></ul></div></div></div><pre>$("#testtab2").tab({tabId:"#tabtag2", //切换控制器的IDtabTag:"li", //切换控制器标签conId:"#tabcon2", //内容容器IDconTag:"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">项目一</li><li>项目二</li><li>项目三</li><li>项目四</li></ul></div><div id="tabcon3" class="tabcon"><div><ul><li><a href="#nogo">日之泉杯：寿战两球张晓彬世界波 金德4:2逆转胜绿城</a></li><li><a href="#nogo">投入超过国字号总和：09足协青少年足球预算500万</a></li><li><a href="#nogo">09中超期待十大焦点战：鲁沪巅峰PK江浙德比劲爆</a></li><li><a href="#nogo">泰达上下不惧魔鬼赛程 队员：早晚要打不如一锅端</a></li></ul></div><div><ul><li><a href="#nogo">日之泉杯：寿战两球张晓彬世界波 金德4:2逆转胜绿城</a><span>03/06</span></li><li><a href="#nogo">投入超过国字号总和：09足协青少年足球预算500万</a><span>03/06</span></li><li><a href="#nogo">09中超期待十大焦点战：鲁沪巅峰PK江浙德比劲爆</a><span>03/06</span></li><li><a href="#nogo">泰达上下不惧魔鬼赛程 队员：早晚要打不如一锅端</a><span>03/06</span>></li></ul></div><div><ul><li><a href="#nogo">日本影星集合可爱清纯于一身</a></li><li><a href="#nogo">中超联赛世界排名不敌新加坡</a></li><li><a href="#nogo">中超联赛世界排名不敌新加坡</a></li><li><a href="#nogo">中超联赛世界排名不敌新加坡</a></li></ul></div><div><ul><li><a href="#nogo">日之泉杯：寿战两球张晓彬世界波 金德4:2逆转胜绿城</a><span>03/06</span></li><li><a href="#nogo">投入超过国字号总和：09足协青少年足球预算500万</a><span>03/06</span></li><li><a href="#nogo">09中超期待十大焦点战：鲁沪巅峰PK江浙德比劲爆</a><span>03/06</span></li><li><a href="#nogo">泰达上下不惧魔鬼赛程 队员：早晚要打不如一锅端</a><span>03/06</span>></li></ul></div></div></div><pre>$("#testtab3").tab({tabId:"#tabtag3",tabTag:"li",conId:"#tabcon3",conTag:"div",<strong>auto:true,</strong>act:"mouseover"})    </pre><h3>&quot;slow&quot;效果</h3><div class="testtab" id="testtab4"><div id="tabtag4" class="tabtag" style="position: relative;"><ul><li class="cur">项目一</li><li>项目二</li><li>项目三</li><li>项目四</li></ul></div><div id="tabcon4" class="tabcon"><div><ul><li><a href="#nogo">日之泉杯：寿战两球张晓彬世界波 金德4:2逆转胜绿城</a></li><li><a href="#nogo">投入超过国字号总和：09足协青少年足球预算500万</a></li><li><a href="#nogo">09中超期待十大焦点战：鲁沪巅峰PK江浙德比劲爆</a></li><li><a href="#nogo">泰达上下不惧魔鬼赛程 队员：早晚要打不如一锅端</a></li></ul></div><div><ul><li><a href="#nogo">日之泉杯：寿战两球张晓彬世界波 金德4:2逆转胜绿城</a><span>03/06</span></li><li><a href="#nogo">投入超过国字号总和：09足协青少年足球预算500万</a><span>03/06</span></li><li><a href="#nogo">09中超期待十大焦点战：鲁沪巅峰PK江浙德比劲爆</a><span>03/06</span></li><li><a href="#nogo">泰达上下不惧魔鬼赛程 队员：早晚要打不如一锅端</a><span>03/06</span>></li></ul></div><div><ul><li><a href="#nogo">日本影星集合可爱清纯于一身</a></li><li><a href="#nogo">中超联赛世界排名不敌新加坡</a></li><li><a href="#nogo">中超联赛世界排名不敌新加坡</a></li><li><a href="#nogo">中超联赛世界排名不敌新加坡</a></li></ul></div><div><ul><li><a href="#nogo">日之泉杯：寿战两球张晓彬世界波 金德4:2逆转胜绿城</a><span>03/06</span></li><li><a href="#nogo">投入超过国字号总和：09足协青少年足球预算500万</a><span>03/06</span></li><li><a href="#nogo">09中超期待十大焦点战：鲁沪巅峰PK江浙德比劲爆</a><span>03/06</span></li><li><a href="#nogo">泰达上下不惧魔鬼赛程 队员：早晚要打不如一锅端</a><span>03/06</span>></li></ul></div></div></div><pre>$("#testtab4").tab({tabId:"#tabtag4",tabTag:"li",conId:"#tabcon4",conTag:"div",<strong>effact: "slow"</strong>})    </pre></div></div></body>
</html>

转载于:https://my.oschina.net/zhenghuazhi/blog/198855

jquery tab 水平tab分页相关推荐

html tab与jQuery,js与jquery分别实现tab标签页功能的方法
本文实例讲述了js与jquery分别实现tab标签页功能的方法.分享给大家供大家参考,具体如下: 首先列出样式和html标签 *{margin: 0;padding: 0;} #myul li {li ...
js + jquery 两栏Tab鼠标移入显示/隐藏的效果（详）
学习文献: 必须要掌握的原生JS实现JQuery 了解了这些才能开始发挥jQuery的威力 - 谦行 – JavaScript和jQuery两款TAB选项卡示例 -- 西门 jquery原创分享社区 ...
用jQuery事件写Tab选项卡
开发工具与关键技术: VS 2019/JS 作者:唐嘉怡撰写时间:2022/6/8 大家都用过Jscript事件来写过Tab选项卡,但是代码会很繁琐,但如果有更简洁的方法来写Tab选项卡事件就更好了 ...
JQuery Datatables 服务端分页简单应用学习
背景介绍最近在一个简单小项目中碰到需要一个前端数据表格控件,在看了网上的资料后最终选择了JQuery Datatables.Datatables功能及其强大,基本满足我的所有需求,在加上其插件Edi ...
jquery前端简单分页_如何使用jQuery创建简单的分页
jquery前端简单分页 How to create easy pagination with jQuery jQuery pagination. All we know, that when we ...
基础平台项目之集成Jquery.pagination.js实现分页
本博客介绍基于Spring Data这款orm框架加上 Jquery.pagination插件实现的分页功能. 本博客是基于一款正在开发中的github开源项目的,项目代码地址:https://git ...
jquery中ajax的分页,利用jQuery中的ajax分页实现代码
本文实例讲解了用jQuery中的ajax分页相关代码,分享给大家供大家参考,具体内容如下把分页封装到一个jsp里,那么大家就可以通过include的方式引入分页的页面这里起名为page_ajax.j ...
jquery实现简单的分页功能
jquery实现简单的分页功能本文适合少量数据的使用,如果数据条数过多,不太适合! 页面html代码 <table>  </table> ...
jquery --- 监听tab栏的变化
1. jQuery样式操作 1.1 操作css方法参数只写属性名,则返回属性值(字符串) $(this).css('color') 参数是属性名.属性值(逗号分隔,则表示设置属性 $(this). ...

jquery tab 水平tab分页

jquery tab 水平tab分页相关推荐

最新文章

热门文章