iou3344 2022-10-31 20:47 采纳率: 85.2%
浏览 24
已结题

js实现下一个<hr>的切换

网页中有无数个<hr>(也就是横线),
每个<hr>之间是数量不等的网页内容,
我想在页面右侧有两个悬停的按钮,
每点一下,
就自动跳转到下一个<hr>,
或者上一个<hr>。
这个js该怎么写呢?

  • 写回答

3条回答 默认 最新

  • ironprosper 2022-10-31 22:33
    关注
        function next(){
            var hrList = document.getElementsByTagName('hr')
            var scrollTop = document.documentElement.scrollTop
            for (let i = 0; i < hrList.length; i++) {
                if(hrList[i].offsetTop > scrollTop){
                    document.documentElement.scrollTop = hrList[i].offsetTop
                    break;
                }
            }
        }
        function last(){
            var hrList = document.getElementsByTagName('hr')
            var scrollTop = document.documentElement.scrollTop
            var lastOffset = 0
            for (let i = 0; i < hrList.length; i++) {
                if(hrList[i].offsetTop >= scrollTop){
                    document.documentElement.scrollTop = lastOffset
                    break;
                }
                lastOffset = hrList[i].offsetTop
            }
        }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 11月4日
  • 已采纳回答 11月4日
  • 修改了问题 10月31日
  • 创建了问题 10月31日

悬赏问题

  • ¥15 oracle集群安装出bug
  • ¥15 关于#python#的问题:自动化测试
  • ¥20 问题请教!vue项目关于Nginx配置nonce安全策略的问题
  • ¥15 教务系统账号被盗号如何追溯设备
  • ¥20 delta降尺度方法,未来数据怎么降尺度
  • ¥15 c# 使用NPOI快速将datatable数据导入excel中指定sheet,要求快速高效
  • ¥15 再不同版本的系统上,TCP传输速度不一致
  • ¥15 高德地图点聚合中Marker的位置无法实时更新
  • ¥15 DIFY API Endpoint 问题。
  • ¥20 sub地址DHCP问题