前端基础:同页面不同区块跳转的三种方式

各种语言官网的教程部分经常是这样的页面

前端基础:同页面不同区块跳转的三种方式_第1张图片

 一边是目录,一般是具体的内容,点击目录就能跳转到某个区块(当然这个页面还涉及到请求等等,和我这边要讲的不完全一样,我这边只是拿这个结构做个例子)。

这就涉及到了一个页面之中不同区块件的跳转,这里有三种方式可以实现这样的跳转。下面是代码





    
    
    
    Document
    



    通过id跳转到盒子1
    
通过name跳转到盒子2
点击跳转到盒子三
我是盒子1
跳转到box2 我是盒子2
我是盒子3

这里的.sp其实就是空白的占位格子,让整个页面长一点,具体的高度是50vh。

第一种方式是id加a链接的形式,具体的对应如下

 通过id跳转到盒子1

 
我是盒子1

这里的a链接的href对应的是我们盒子id,hash本身就是一种锚定

第二种方式是a链接跳转到a链接,这里href对应的是a链接的name属性,

通过name跳转到盒子2


 
跳转到box2 我是盒子2

第三种方法改变的location对象,实际上是通过click行为手动改变hash,需要注意这种写法的herf要写个空

 点击跳转到盒子三

 
我是盒子3

所谓的页面也跳转行为其实就是让目标区块在页面内顶格,当然如果页面长度不够的情况下,也会出现跳转标签在页面中间出现的情况。还是非常简单的。

你可能感兴趣的:(前端综合)