选项卡和分页整合版【原创】

web前端 杭州-小白 选项卡和分页整合版【原创】

之前做一个活动用到的简单效果，在这里分享下，分页和选项卡完全可以分开的。

分页调用参数：

    this.mainProduct=config.mainProduct,//要显示内容的div
    this.productItem=config.productItem,//显示内容div中的一项
    this.mainPage=config.mainPage,//显示内容div中的分页div
    this.Pagesize=config.Pagesize,//分页大小
    this.className=config.className||”on”;//分页的当前样式,默认是on
    this.scrollTop=config.scrollTop||0;    //点击分页要到达的地方 .默认顶部

选项卡调用参数

    this.mainNav=config.mainNav;//选项卡的div
    this.mainContent=config.mainContent;//选项卡内容
    this.Reset=config.Reset||false;//点击选项卡的时候重置分页，不配置就是false
    this.className=config.className||”on”;//选项卡的样式，默认是on

demo中的调用方式

<script type=”text/javascript”>
var Newpage=new mainPage({mainProduct:”.mainProduct”

2pharmaceuticals.com

,productItem:”.productItem”,mainPage:”.mainPage”,Pagesize:6,scrollTop:0}),
    NewTab=new tabNab({mainNav:”.subNav li”,mainContent:”.mainProduct”,Reset:Newpage});
    Newpage.GetPage();
    NewTab.showTab();
</script>

效果和css样式都是挂钩的。所以大家要注意下哈。这个只是例子，效果是参照物。能够举一反三你就进步咯！！！嘿嘿

如果不懂可以留言询问哈。如果不对或者改进的地方请大家多多指出奥.

鉴于很多朋友都想要个选项卡效果。我现在把这个剥离。放到了http://jsfiddle.net/xiaobai/hB723/这里可以自行查看

详情见demo