bootstrap侧边栏圆点导航

发布时间：2020-12-18 00:42:53 所属栏目：安全来源：网络整理

导读：如图，随页面向下滑动，到指定页面后圆点变成白色，也可以通过点击圆点跳转到某个位置。这是四个部分。这是导航， } .select{ background-color: white; } 这是导航的样式，使其浮动在页面右侧。在这种情况下，已经可以点击圆点跳转到某个页面，只是圆点的

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

这是四个部分。

这是导航，

}
.select{
background-color: white;
}

这是导航的样式，使其浮动在页面右侧。在这种情况下，已经可以点击圆点跳转到某个页面，只是圆点的颜色还没有设定好。

select和default决定小圆点的颜色。

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

})

当点击圆点时，该圆点添加类.select，移除类.default；就是说移除灰色，添加白色。并且在这时，让他的父节点也就是

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

<div class="jb51code">
<pre class="brush:js;">
$(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");
}
});
});

这是屏幕滑动时的小圆点样式的代码。

示例

two&& this_scrollTop

如果大家还想深入学习，可以点击进行学习，再为大家附3个精彩的专题：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!