bootstrap侧边栏圆点导航

abstract：如图，随页面向下滑动，到指定页面后圆点变成白色，也可以通过点击圆点跳转到某个位置。

如图，随页面向下滑动，到指定页面后圆点变成白色，也可以通过点击圆点跳转到某个位置。

这是四个部分。

这是导航，

.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；就是说移除灰色，添加白色。
并且在这时，让他的父节点也就是

标签的兄弟节点的子节点（其他的圆点）移除白色，添加灰色。

$(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_scrollTopthree&& this_scrollTopfour&& this_scrollTopfive){ $(".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
       
更多关于bootstrap侧边栏圆点导航请关注PHP中文网（m.sbmmt.com）其他文章！
       

       


       

        
WeChat
        
share