js实现简单百度分页和两种tab样式切换简单实现
<span style="font-family:KaiTi_GB2312;font-size:18px;">1、分页 /* *分页 */ var size = data.count; //总页数 var spage = (page - 1) < 1 ? 1 : (page - 1); var pagehtml = "<a href=\"#\" onclick=\"javascript:getBookList(" + spage + ");\"><span><</span></a>"; var firstpage = "0.5"; var endpage = 10; //当页数过多时用来隐藏一部分 for(var p = page;p>0;p--){ firstpage = p/5+""; if(firstpage.indexOf(".") == -1){ firstpage = p+""; endpage = firstpage + 10; break; } } if(firstpage.indexOf(".") != -1){ firstpage = 1; endpage = 10; } if (endpage > size) { endpage = size; } for (var j = firstpage; j <= endpage; j++) { var cl = ""; if (page == j) { cl = "now"; } pagehtml += "<span><a href=\"#\" class=\"" + cl + "\" onclick=\"javascript:startBook(" + j + ")\">"+ j + "</a></span>"; } pagehtml += "共" + size + "页 转到第<input type=\"text\" size=\"3\" id=\"toPage\"/>页"; pagehtml += "<a class=\"btn\" href=\"#\" onclick=\"startBook(0)\"><span>跳转</span></a>"; $("#pagehtml").html(pagehtml); function startBook(page){ if(K17.isEmpty(page) || page == 0) //分页跳转使用 page = $("#toPage").val(); //封装条件,封装调用一个ajax请求函数 } 2.tab切换 两种切换样式实现的tab切换效果 <div class="link1"> <a class="m now" href="#" onclick="javascript:startBook(this,1,1);" id="1">男生 </a> <a class="w" href="#" onclick="javascript:startBook(this,1,2);" id="2">女生 </a> </div> <div class="link2"> <a class="m" href="#" onclick="javascript:startBook1(this,1,1);" id="1">tab1 </a> <a class="w" href="#" onclick="javascript:startBook1(this,1,2);" id="2">tab2 </a> <a class="w" href="#" onclick="javascript:startBook1(this,1,3);" id="3">tab3 </a> </div> /** *为当前tab新增样式 */ function startBook(obj,page,zone){ $(".link1 a").removeClass("now"); $(obj).addClass("now"); var zone = $(".link1 .now").attr("id"); alert(zone); } /** *更换样式 */ function startBook1(obj,page,zone){ $(".link2 a").removeClass("m").addClass("w"); $(obj).removeClass("w").addClass("m"); var zone = $(".link2 .m").attr("id"); alert(zone); }</span>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。