网页跳转的实现方法

相信大家都上过网,比如逛淘宝什么的,在看到一个喜欢的商品后一点击就进入了商品的信息界面。是不是觉得很神奇?只需点击一下就可以显示出所需要的东西,其实告诉大家名没有你们想象中那么难,那么我就给大家看一下这一简单的实现原理,我将用一个例子来进行说明:在这里插入图片描述
我简单的做了一个样式(当然只是一个样式,所实现的效果肯定不是那么理想),做出的内容不管是什么,但主要的还是要演示今天的主题,重点看到下面的那一个点击就能进行网页跳转的字眼:“点击获取更多资讯>>”:
在这里插入图片描述

相信大家对上面图片中所呈现的东西并不陌生,往往是我们看什么新闻什么的点击进去就会有更多的资讯什么的。当你点击这个跳转链接之后就会实现页面跳转的效果,跳到另一个页面中去看上去是不是很神奇?但实际上仅仅是我们实验性写的代码怎么可能就真的实现网页跳转了呢~
那怎么才能实现真正的网页跳转呢?那就要把我们测试中用来跳转的代码”点击获取更多资讯>>”中的div改为如下图的a标签:
在这里插入图片描述
这是我们最普通的a标签,一般我们会习惯行的将href的“设置”为#,到这里我们就要吧这个#改为事先做好的用作跳转用的网页的链接或者是某个网页的网址,如下:
在这里插入图片描述
面,首先我们把它放到我们原本网页的文件夹内(寻找方便),然后将它的本地链接写到a标签的href属性内:
在这里插入图片描述
这样就能实现点击页面跳转了,是不是很简单。原理就是事先布局好要跳转的页面,其次将那个页面的链接写到a标签的href属性中就行了。
其实不止是本地的链接,a标签的href属性还可以设置为你想要的网址等等,比如是百度链接放在里面,那么点击a标签就会跳转到百度的页面上。

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页