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

柔光的暖阳◎ 2022-08-14 02:52 157阅读 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;
    	}
    }