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

标签：java   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>

转载指明：http://blog.csdn.net/yangkai_hudong

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

标签：java   js   分页   tab切换   

原文地址：http://blog.csdn.net/yangkai_hudong/article/details/41444895