bootstrap側邊欄圓點導航，bootstrap側邊圓點

bootstrap側邊欄圓點導航，bootstrap側邊圓點

，隨頁面向下滑動，到指定頁面後圓點變成白色，也可以通過點擊圓點跳轉到某個位置。

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

這是四個部分。

<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> 

這是導航，

.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; } 

這是導航的樣式，使其浮動在頁面右側。
在這種情況下，已經可以點擊圓點跳轉到某個頁面，只是圓點的顏色還沒有設定好。

select和default決定小圓點的顏色。

$(".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");   }) 

當點擊圓點時，該圓點添加類.select，移除類.default；就是說移除灰色，添加白色。
並且在這時，讓他的父節點也就是<li>標籤的兄弟節點的子節點（其他的圓點）移除白色，添加灰色。

$(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");   }  });  }); 

這是螢幕滑動時的小圓點樣式的代碼。

樣本

$(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");   } }); 

如果大家還想深入學習，可以點擊這裡進行學習，再為大家附3個精彩的專題：

Bootstrap學習教程

Bootstrap實戰教程

Bootstrap Table使用教程

Bootstrap外掛程式使用教程

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。