Bootstrap side bar pagination and bootstrap side pagination

Bootstrap side bar pagination and bootstrap side pagination

, As the page slides down, the dot turns white after the specified page, you can also jump to a certain position by clicking the dot.

<div class="onepage" id="onepage"></div> <div class="twopage" id="twopage"></div> <div class="threepage" id="threepage"></div> <div class="fourpage" id="fourpage"></div> 

These are four parts.

<div class="side-nav">  <ul class="nav-side-nav">   <li><a href="#onepage" class="tooltip-side-nav select one"></a></li>   <li><a href="#twopage" class="tooltip-side-nav default two"></a></li>   <li><a href="#threepage" class="tooltip-side-nav default three"></a></li>   <li><a href="#fourpage" class="tooltip-side-nav default four"></a></li>   <li><a href="#fivepage" class="tooltip-side-nav default five"></a></li>  </ul> </div> 

This is the navigation,

.side-nav{  position: fixed;  top: 45%;  right: 20px;  z-index: 1; } .side-nav ul{  text-align: center;  list-style: none;  margin: 0;  padding-left: 0; } .side-nav ul li{  display: block;  line-height: 1.45em;  margin: 0;  padding: 8px 0; } .side-nav ul li a{  display: block;  width: 10px;  height: 10px;  border-radius: 50%; } .default{  background-color: #85939b;  } .select{  background-color: white; } 

This is the navigation style that floats on the right side of the page.
In this case, you can click the dot to jump to a page, but the color of the dot is not set yet.

Select and default determine the color of the dot.

$(".tooltip-side-nav").click(function(){   $(this).addClass("select").parent().siblings().children().removeClass("select");  console.log($(".tooltip-side-nav"));  $(this).removeClass("default").parent().siblings().children().addClass("default");   }) 

When you click a dot, add the class. select to the dot and remove the class. default. That is, remove the gray color and add the white color.
At this time, remove the child nodes (other dots) of the brother node whose parent node is the <li> label from the white color and add the gray color.

$(function(){  var two = $(".twopage").offset().top;  var three = $(".threepage").offset().top;  var four = $(".fourpage").offset().top;  var five = $(".fivepage").offset().top;    $(window).scroll(function() {   var this_scrollTop = $(this).scrollTop();   if(this_scrollTop>two&& this_scrollTop<three){   $(".two").addClass("select").parent().siblings().children().removeClass("select");      $(".two").removeClass("default").parent().siblings().children().addClass("default");   }else if(this_scrollTop>three&& this_scrollTop<four){   $(".three").addClass("select").parent().siblings().children().removeClass("select");      $(".three").removeClass("default").parent().siblings().children().addClass("default");   }else if(this_scrollTop>four&& this_scrollTop<five){   $(".four").addClass("select").parent().siblings().children().removeClass("select");      $(".four").removeClass("default").parent().siblings().children().addClass("default");   }else if(this_scrollTop>five){   $(".five").addClass("select").parent().siblings().children().removeClass("select");     $(".five").removeClass("default").parent().siblings().children().addClass("default");   }  });  }); 

This is the code of the dot style when the screen slides.

Example

$(function(){  var two = $(".twopage").offset().top;  $(window).scroll(function() {   var this_scrollTop = $(this).scrollTop();   if(this_scrollTop>two&& this_scrollTop<three){   $(".two").addClass("select").parent().siblings().children().removeClass("select");   $(".two").removeClass("default").parent().siblings().children().addClass("default");   } }); 

If you want to study in depth, you can click here to learn and attach three special topics:

Bootstrap tutorial

Bootstrap tutorial

Bootstrap Table tutorial

Bootstrap plugin usage tutorial

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.