JS realizes simple Baidu pagination and two kinds of tab style switch simple realization __JS

Source: Internet
Author: User
1, Paging * * Pagination/var size = Data.count; Total pages 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;
	Used to hide part for (var p = page;p>0;p--) {firstpage = p/5+ "" When there are too many pages;
		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 +" \ "onclick=\" Javascript:startbook ("+ j +") \ ">" + j + "&
Lt;/a></span> ";
pagehtml + = "Total" + size + "page goto <input type=\" text\ size=\ "3\" id=\ "topage\"/> "; pagehtml + = "<a class=\" btn\ "href=\" #\ "onclick=\" startbook (0) \ "><span> Jump </span></a>";
$ ("#pagehtml"). HTML (pagehtml);
		/** * Start executing/function Startbook (page,zone) {if (K17.isempty (page) | | page = = 0)//Jump Use page = $ ("#toPage"). Val ();
			   if (!islegalpage (page)) {alert ("Please enter a valid number of pages");
		Return }//Encapsulation condition, encapsulation calls an AJAX request function} 2.tab toggle two switch styles to achieve tab switching effect <div class= "Link1" > <a class= "M Now" href= "#" onclick= "ja Vascript:startbook (this,1,1); "id=" 1 "> Boys </a> <a class=" W "href=" # "onclick=" Javascript:startbook (This, 1,2); "id=" 2 "> Girls </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>/** * New style for current tab */function Startbook (obj,page,zone) {$ (". Link1 a"). Removeclass ("Now");
	$ (obj). addclass ("Now");
	var zone = $ (". Link1. Now"). attr ("id");
alert (zone); }
/**
*Replace style */function StartBook1 (obj,page,zone) {$ (". Link2 a"). Removeclass ("M"). AddClass ("w");
	$ (obj). Removeclass ("W"). AddClass ("M");
	var zone = $ (". Link2. M"). attr ("id");
alert (zone); /** * Interpretation is valid page/function islegalpage (page) {//interpretation is the number if (page!= "" &&!isnan (page)) {var posinum =/^
	[0-9]*[1-9][0-9]*$/;
		 Whether the interpretation is a positive integer if (posinum.test (page)) return true;
	else return false;
	}else{return false; }
}


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.