如下图，多个tab，每个tab下面是图片+文字，每个tab都有分页,ajax动态分页。如何用一个分页函数实现这样的需求？有没有相关的代码可以学习下？
截图
希望达到的效果 http://www.vpnsg.com/ 这个网站的tab切换分页效果 不过它是生成了4个分页。虽然也可以实现目的,但是代码过于多余,有没有可复用的方案？我用到的是jquery.pagination.js分页插件，ajax动态生成分页。
我之前倒是做过一个开启的程序。思路是这样的：当切换上面的分类的时候在生成一个大类的cookie，同时触发ajax，将内容返回到下面的p里面。而分页是公共的，每次点击换页的时候，首先获取cookie，判断是哪个分类，然后再通过ajax进行传值。具体代码没有什么复杂的地方。
可以把这个分页部分做成一个组件，通过传参数(总数，每页显示数，当前页数等)来动态生成(渲染和绑定事件)这个分页部分，通过ajax获取不同数据后根据不同需求把这个组件生成出来。
菜鸟来写一下 简单的实现方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <!--分类选项卡区域--> <p id="title"> <p flag="dataName" class="title_p">dataName</p> <p flag="dataCountry" class="title_p">dataCountry</p> </p> <p style="border:1px solid red;"></p> <!--内容选项卡区域--> <p id="context"> <p id="dataName"></p> <p id="dataCountry"></p> </p> <!--下一页按钮--> <p onclick="nextPage()">下一页</p> <script src="jQuery.js"></script> <script> var dataNameIndex=0; var dataCountryIndex=0; var dataName1=["data1_a","data1_b","data1_c"]; var dataName2=["data2_a","data2_b","data2_c"]; var dataCountry1=["dataCountry1_a","dataCountry1_b","dataCountry1_c"]; var dataCountry2=["dataCountry2_a","dataCountry2_b","dataCountry2_c"]; (function(){load();})(); function load(){ bindEvent(); } function bindEvent(){ jQuery(".title_p").click(function(){ pageFlag=jQuery(this).attr("flag"); var thisIndex=eval(pageFlag+"Index"); //第一页的时候默认加载数据 其他时候不加载 if(eval(pageFlag+"Index")==0){ handleData(eval(pageFlag+eval("++"+pageFlag+"Index"))) } jQuery("#context>p").hide(); jQuery("#"+pageFlag).show(); }) } function handleData(dataHtml){ var html=""; jQuery(dataHtml).each(function(){ html+="<p>"+this+"</p>"; }) jQuery("#"+pageFlag).append(html); } function nextPage(){ handleData(eval(pageFlag+eval("++"+pageFlag+"Index"))); } </script> </html>
把四个tab的分页都放在一起才是“多余”！这不利于后期的维护，开发时也更容易出错，四个tab对应四个分页是可以的，因为这个四个tab页中的内容是相互独立的，不存在太多联系，如果联系紧密（如职位列表按照职位类型区分tab），可以考虑使用一个分页控件。以上是我的建议，另外关于代码实现，你都已经会实现一个分页了，那4个或者是4个合一个，也没什么问题。
一般来说，牵涉到这么复杂的tab切换，一般都不可能放在一个页面中来完成的。否则某个出了问题，维护起来很麻烦。
于是，这个时候，使用模块化的方式来解决问题就显得非常重要了。如果你自己单独搞过静态博客网站的话，比如wordpress，jekyll，hexo，都是通过拼装的方式，将每个页面相同的部分单独存为一个模板，需要的时候，引入就行了。这个需要后端程序配合。
至于模板的前端解决方案，可以使用angular等前端框架。
每个tab存放自己的请求连接和响应内容对应容器，点击tab时根据当前tab信息请求数据
像是http://www.vpnsg.com 的方案也还好啊，复用性也还不错.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
我之前倒是做过一个开启的程序。思路是这样的：当切换上面的分类的时候在生成一个大类的cookie，同时触发ajax，将内容返回到下面的p里面。
而分页是公共的，每次点击换页的时候，首先获取cookie，判断是哪个分类，然后再通过ajax进行传值。
具体代码没有什么复杂的地方。
可以把这个分页部分做成一个组件，通过传参数(总数，每页显示数，当前页数等)来动态生成(渲染和绑定事件)这个分页部分，通过ajax获取不同数据后根据不同需求把这个组件生成出来。
菜鸟来写一下 简单的实现方法
把四个tab的分页都放在一起才是“多余”！这不利于后期的维护，开发时也更容易出错，四个tab对应四个分页是可以的，因为这个四个tab页中的内容是相互独立的，不存在太多联系，如果联系紧密（如职位列表按照职位类型区分tab），可以考虑使用一个分页控件。
以上是我的建议，另外关于代码实现，你都已经会实现一个分页了，那4个或者是4个合一个，也没什么问题。
一般来说，牵涉到这么复杂的tab切换，一般都不可能放在一个页面中来完成的。否则某个出了问题，维护起来很麻烦。
于是，这个时候，使用模块化的方式来解决问题就显得非常重要了。
如果你自己单独搞过静态博客网站的话，比如wordpress，jekyll，hexo，都是通过拼装的方式，将每个页面相同的部分单独存为一个模板，需要的时候，引入就行了。这个需要后端程序配合。
至于模板的前端解决方案，可以使用angular等前端框架。
每个tab存放自己的请求连接和响应内容对应容器，点击tab时根据当前tab信息请求数据
像是http://www.vpnsg.com 的方案也还好啊，复用性也还不错.