js实现简单百度分页和两种tab样式切换简单实现

最新推荐文章于 2020-02-01 18:16:57 发布

y_keven

最新推荐文章于 2020-02-01 18:16:57 发布

阅读量4.9k

点赞数 4

分类专栏： JS 文章标签： java js 分页 tab切换

本文链接：https://blog.csdn.net/yangkai_hudong/article/details/41444895

版权

JS 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

1、分页
/*
*分页
*/
var size = data.count;   //总页数
var spage = (page - 1) < 1 ? 1 : (page - 1);
var pagehtml = "<a href=\"#\" οnclick=\"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;
	}
}
try{
	if(firstpage.indexOf(".") != -1){
		firstpage = 1;
		endpage = 10;
	}
}catch(e){
}
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 + "\" οnclick=\"javascript:startBook(" + j + ")\">"+ j + "</a></span>";
}
pagehtml += "共" + size + "页 转到第<input type=\"text\" size=\"3\" id=\"toPage\"/>页";
pagehtml += "<a class=\"btn\" href=\"#\" οnclick=\"startBook(0)\"><span>跳转</span></a>";
$("#pagehtml").html(pagehtml);
/**
*开始执行
*/
function startBook(page,zone){
		if(K17.isEmpty(page) || page == 0) //跳转使用
			page = $("#toPage").val();
		if(!isLegalPage(page)){
			   alert("请输入合法的页数");
			   return;
		}
//封装条件，封装调用一个ajax请求函数
}	

2.tab切换
  两种切换样式实现的tab切换效果
<div class="link1">
	<a class="m now" href="#" οnclick="javascript:startBook(this,1,1);" id="1">男生 </a>
	<a class="w" href="#" οnclick="javascript:startBook(this,1,2);" id="2">女生 </a>
</div>
<div class="link2">
	<a class="m" href="#" οnclick="javascript:startBook1(this,1,1);" id="1">tab1 </a>
	<a class="w" href="#" οnclick="javascript:startBook1(this,1,2);" id="2">tab2 </a>
	<a class="w" href="#" οnclick="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);
}
/**
 * 判读是否是合法的页数
 */
function isLegalPage(page){
	//判读是否是数字
	if(page!=""&&!isNaN(page)){
	     var posiNum = /^[0-9]*[1-9][0-9]*$/;
	//判读是否是正整数
		 if(posiNum.test(page))
		   	 return true;
		 else
			 return false;
	}else{
		return false;
	}
}