页面跳转——所跳转页面有display:none(锚点跳转不到)

本文详细介绍了如何在网页跳转时,处理遇到的display:none元素导致无法正常跳转的问题。通过引入JavaScript代码,实现跳转前的元素显示,确保页面平滑过渡。此外,还分享了跳转前获取URL锚点信息,以及在目标页面通过JavaScript动态显示隐藏元素的技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

     今天遇到了一个难题,就是要从A页面跳转到B页面的指定地方,但这个指定的地方又有个display:none;在网上找了一下解决的办法一直没有找到,或许是我搜索的关键词不对吧!想了一小段时间后忽然灵光一闪,嘿嘿嘿!脑子里蹦出一个自认为觉得好的点子。

      众所周知,在没有display:none这个家伙干扰的前提下,从A页面跳转到B页面的指定地点是挺容易的。例:

       A页面代码 

                             <a href="javascript:void(0)" onclick="skip01()">跳转</a>
                             <script>
                               function skip01(){
                     window.location.href="B.html#s";  //跳转到B.html页面,#s 是锚点,这里不要空格
                         }
                              </script>

  B页面代码

                  //用来撑开页面

 s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/>
  s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/>
   s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/>
//跳转到这里
                  <a id="s">swdfds</a>//要跳转到的位置

  这样就很简单的,如果要平滑效果,就再加点js代码。

   下面是有display:none的解决办法:

              A页面的代码不变,只有B页面的js有改变。

               <script>
                    var src_0=location.href;//获取当前页面的网址
                    var s=src_0.split("#");//以#分割网址
                    var id_0=s[1];//获取#后的id名
                    if(id_0.length>0){//判断id是否存在
                    var display_0=document.getElementById(id_0);//找到此id
                    display_0.style.display="block";//将其display的值便为block
                      }
                 </script>

               由于js代码在最初就一起被加载完成,所以还是能跳转到A页面指定的位置。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值