網站導航欄點擊變色并跳轉頁面導航欄顏色如何固定在相對應欄目位置？求大佬給代碼
uj5u.com熱心網友回復：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="D:\站點\案例學習\js\jquery-3.1.1.min.js">
$(window).scroll(function(event){
checkscroll()
});
function checkscroll(){
var winPos = $(window).scrollTop(); //螢屏位置
var NodePos = [$('#a').offset().top,$('#b').offset().top,$('#c').offset().top,$('#d').offset().top],//提前獲取好元素位置
length = NodePos .length;
//console.log(NodePos)
if(winPos<=NodePos[1]){
$('.btn a').removeClass('active');
$('.btn a:nth-child(1)').addClass('active');
}else{
for(var i = 1;i<length; i++){
if(winPos<=NodePos[i+1]&&winPos>NodePos[i]){
$('.btn a').removeClass('active');
$('.btn a:nth-child('+(i+1)+')').addClass('active');
break;
}
}
}
}
</script>
<style>
.btn{
position:fixed;
right:10%;
top:20%;
}
.btn a{
display:block;
width:80px;
text-align:center;
color:#dfdfdf;
}
.btn .active{
color:#fff;
}
</style>
</head>
<body>
<div id='a' style="height:100vh;background:red"></div>
<div id='b' style="height:100vh;background:yellow"></div>
<div id='c' style="height:100vh;background:pink"></div>
<div id='d' style="height:100vh;background:blue"></div>
<div class='btn'>
<a href="https://bbs.csdn.net/topics/#a" class='active'>跳轉a</a>
<a href="https://bbs.csdn.net/topics/#b">跳轉b</a>
<a href="https://bbs.csdn.net/topics/#c">跳轉c</a>
<a href="https://bbs.csdn.net/topics/#d">跳轉d</a>
</div>
</body>
</html>
uj5u.com熱心網友回復：
點擊的時候添加一個樣式active, 自己敲一遍就清楚了，直接看代碼作用不大。轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/84343.html
標籤：HTML5
上一篇：求改成回圈陳述句
下一篇：物件