SDNssaas 2021-06-16 16:30 采纳率: 100%
浏览 139
已采纳

原生js页面内点击导航按钮跳转到指定位置,为什么实现不了?

(function(){
	var productUl = document.getElementById("product_ul");
	var productLi = productUl.getElementsByTagName("li");
	var listul = document.getElementById("productUl");
	var listli = listul.getElementsByTagName("li");
	var pheight = document.getElementById("product_product");
		function productDh(dj){
			for(var i=0;i<productLi.length;i++){
				productLi[i].className = "";
				}
				productLi[dj].className = "producton";
				
			}
		for(var j=0;j<productLi.length;j++){
			productLi[j].index = j;
			productLi[j].onclick = function(){
				productDh(this.index);
				}
			}
		/*
            *循环每个导航按钮,添加监听点击事件,点击跳转到相应的位置,为什么实现不了,
            *我想把a的值根据productLi[i]点击哪一个跳转到相应的listli[j].offsetTop - h
        */	
		for(var i=0;i<productLi.length;i++){
			var h = pheight.offsetHeight;
			productLi[i].addEventListener("click",function(){	
				for(var j=0;j<listli.length;j++){
					var a = listli[j].offsetTop - h;
					console.log(a);//这里控制台都能输出每一项
					window.scrollTo(0,a);//这里就接收不了a里面的数值
					}
				});
			}
		}());
  • 写回答

4条回答 默认 最新

  • CSDN专家-showbo 2021-06-16 16:45
    关注

    你这个代码是跳转到最后的listli所在位置了,改成下面这样,看加粗的部分


               

            for (var i = 0; i < productLi.length; i++) {
                productLi[i].addEventListener("click", function () {

    var h = pheight.offsetHeight;//放里面来,防止页面resize过


                    var i = this.index;//this为当前点击的li,获取你上一次for循环设置的index property

                    var a = listli[i].offsetTop - h;
                    console.log(a);//这里控制台都能输出每一项
                    window.scrollTo(0, a);//这里就接收不了a里面的数值

                });
            }

     

     

    帮助到你可以点击采纳吗,谢谢~~

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

悬赏问题

  • ¥15 初学者用plt报错,求解答
  • ¥18 深度学习tensorflow1,ssdv1,coco数据集训练一个模型
  • ¥100 关于注册表摄像头和麦克风的问题
  • ¥30 代码本地运行正常,但是TOMCAT部署时闪退
  • ¥15 关于#python#的问题
  • ¥15 主机可以ping通路由器但是连不上网怎么办
  • ¥15 数据库一张以时间排好序的表中,找出多次相邻的那些行
  • ¥50 关于DynamoRIO处理多线程程序时候的问题
  • ¥15 kubeadm部署k8s出错
  • ¥15 Abaqus打不开cae文件怎么办?