div链接跳转

已于 2022-05-07 11:09:22 修改
阅读量5.8k 收藏 26
点赞数 4
分类专栏： Visual Studio Code 文章标签： javascript html
于 2022-04-20 15:04:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/VibMike/article/details/124298088
版权

1、先建立一个div

2、给div写个id，直接写个go吧，再写个class，就叫go1吧

3、给它里面写个你要跳转的网址名称

4、给它设置个样式，弄个黑色背景什么的

5、然后把字体调成白色，文字居中

6、这是目前这个div的样子

7、接着给div写js，先来个windows加载事件

8、获取到那个div

9、给它写个点击事件

10、添加跳转，完成

VibMike
关注
  • 4
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
JS动态添加的div点击跳转到另一页面实现代码
01-19
div调用函数跳转： var obj = document.getElementById('id'); obj.onclick=function(){ [removed].href=跳转的地址 rel=external nofollow ; } 源文件： <!DOCTYPE html> <html> <head> <title>首页推荐页面</title> <meta name=author content=Chunna.zheng/> <meta http-equiv=CONTENT-TYPE content=text/html; ch
html学习笔记（四）——点击div实现网页页面跳转
热门推荐
fengrenxiaoli的专栏
12-19 1万+
div onclick="window.open('http://www.mygaytrip.com');跳转页面，在新建窗口打开网页 div onclick="window.location.href='http://www.mygaytrip.com';">跳转页面，在当前窗口打开网页
基于Ajax+div的“左边菜单、右边内容”页面效果实现
01-19
效果演示： ①默认页面（index.jsp）： ②：点击左侧 用户管理 标签下的 用户列表 选项后，右边默认页面内容更新为用户列表页（userList.jsp）的内容 ： ③：同理，点击 产品管理、订单管理 标签下的 产品列表、订单列表 时，右侧内容会相应的刷新为产品列表页（productList.jsp）、订单列表页（recordList.jsp）的内容 这样就使用Ajax+div实现了左边菜单选择，右边内容显示的效果，下面就来看看具体的实现过程吧 一： 整个演示用的示例程序包含默认页面（index.jsp），用户列表页（userList.jsp），产品列表页（productList.j
JS控制div跳转到指定的位置的几种解决方案总结
01-19
总结一下自己在写这个需求遇到的问题，相信大家应该是经常遇到的。即要求滚轮滚动到指定的位置。先看下基本的解决方案。 1.给链接a加个#的方式来实现跳转。（锚点方法）这里直接贴下代码: <div id=container> <a>div1</a> <a>div2</a> <a>div3</a> </div> <div id=div1>div1</div> <div id=div2>div2</div> <div id=div3>div3</div> css样式：
JQuery简单实现锚点链接的平滑滚动
12-29
一般使用锚点来跳转到页面指定位置的时候，会生硬地立即跳转到指定位置，但是有些时候我们想要平滑地过渡到指定的位置，那么可以使用JQuery简单的实现这个效果： 比如，这里我们将通过点击<a>标签跳转到 id为content的指定位置那里。 <a></a> 然后呢，就在我们想要的位置设置id为content的内容块，这里用一个div模拟一篇不像文章的文章。最好将此div放在靠后的位置，这样效果就很明显一点，如果只是测试一下这个效果，可以用简单粗暴的方法，在其前面放很多个<p>标签即可。 <div id=content>
【JavaScript】给一个div块添加链接，实现点击跳转页面
一个甜甜的大橙子的博客
05-19 5220
我是一个甜甜的大橙子🍊，欢迎关注✉️！ 我相信技术的力量💪 努力将所学分享给大家😎 你的点赞❤️分享🚀收藏📖就是对我最大的鼓励！ 实现效果 实现方法1： 使用 window.open 跳转，语法：window.open(*URL,name,specs,replace*) ，如下代码所示： <div class="col-sm-6 col-lg-3" onclick="window.open('{{ url_for('user.inform') }}')"> <div clas.
如何点击div跳转页面？div跳转链接其实很简单！
仿站、源码搭建/迁移技术博客
07-21 7366
一般跳转链接直接用a标签就可以了，但是有时候手机端页面需要用到点击div就实现跳转，就需要点击div跳转链接了。 具体实现如下： <div onclick="window.open('http://www.yfi6.com')">在新窗口跳转至新页面</div> <div onclick="window.open('http://www.yfi6.com','_self')">在当前窗口跳转至新页面</div> ...
HTML跳转到页面指定位置
liyibao111的博客
05-05 3408
HTML跳转到页面指定位置。
点击事件实现简单的局部跳转以及展示后内容自动消失
alexei9的博客
04-04 147
【代码】点击事件实现简单的局部跳转以及展示后内容自动消失。
将div设为链接
p15097962069的博客
01-13 4545
我有一个<div>块，有一些我不想改变的花哨的视觉内容。 我想让它成为一个可点击的链接。 我正在寻找像<a href="…"><div> … </
闪字链接网DIV版 7.0.rar
05-27
闪字链接网DIV版 7.0 新加功能: 1. 修复6.0用户提交已知BUG (更新重点) 2. 增加ASP伪静态*HTM互换 (更新重点) 3. 优化模板，访问速度更快 4. 增加首页广告位，后台直接管理 (更新重点) 5. 改写分类，可做子类 6. 高速代码重写，速度更快，更美观 7. 提示：选择HTM，建议后台设置(审核状态为关闭) ASP伪静态看自己需要选择，选择H TM，请生成全部网址页 8. 本套程序功能完整无错，无任何后门，无任何限制！感谢大家对闪字链接网关注和提 出的意见和建议 9. 欢迎加本人QQ或群提出问题！建站做好本站友情帮助升级和调试，QQ群：38452200 加QQ或群请注明‘程序’ 闪字链接网源码介绍： 1.网站信息设置：网站名称，网站地址，站长邮箱，备案ICP，站长QQ，版权信息。 2.广告管理：首页和分类页ads01-ads10 10个广告位置，可自由修改；首页推荐栏文字广告；竞价广告。 3.新站登陆打开与关闭（网站维护时可关闭）、新站登陆验证码识别 4.网站点入和点出统计 5.后台目录名字建议修改，以确保安全！ 6.常用软件管理：内置16个软件链接，可以修改软件名字、地址、logo、排序等！ 名站导航管理：内置53个名站链接，可以修改名站名字、地址、注释、颜色、排序等！ 实用查询管理：内置24个实用查询，可以修改查询工具名字、地址、注释、颜色、排序等！ 管理帐号设置：更改当前管理员帐号/密码 查看防注入记录，清空防注入记录 7.赞助链接管理（方便站长卖链接）：内置8个赞助链接，可以修改赞助链接名字、地址、位置（首页/内页）、到期时间、颜色、排序等！ 8.网站分类管理：类别添加管理、类别删除管理、类别修改管理、类别拼音转换（重要！） 9.网址管理系统：添加网址链接、站长添加网站列表、用户添加网站列表、用户添加未审网站、有来路未审核网站、报错网站管理、黑名单网站管理、站内网站搜索 10.模版修改管理：分类页面模板、首页页面模板、关于本站页模板、联系本站页模板、使用帮助页模板、公益活动页模板、网址推荐页模板、友情连接页模板、常用软件页模板、竞价推荐页模板等修改/删除  11.生成静态页管理：生成分类页面、生成生成主页及其他页 12.数据库管理：备份数据库、恢复数据库、压缩数据库 13.全站样式与内容分类，标签调用 14.div布局，CSS控制样式，访问速度更快！ 后台登录地址在admin/index.asp，默认管理员账号:admin，密码:admin888
div加链接 html给div加超链接实现点击div跳转的方法
weixin_34025151的博客
06-18 3841
2019独角兽企业重金招聘Python工程师标准>>> ...
点击div跳转
hwm的专栏
03-29 8008
1.通过window.open函数 在新窗口跳转至创新互联 在当前窗口跳转至网站制作 2.通过window.location.href函数 在当前窗口跳转至网站建设
html一个页面中切换多个页面_详解html中页面跳转传递参数的问题
weixin_39684228的博客
12-01 4602
很多时候跟着书和不系统的视频学习，会发现没有方向，学了很多却不知道自己能够做出什么成绩。学习要有一个清晰的职业学习规划，学习过程中会遇到很多问题，你可以到我们的web学习交流君羊-点击此处，同时准备了基础，进阶学习资料。学友都会在里面交流，分享一些学习的方法和需要注意的小细节，每天也会准时讲一些项目实战案例。效果如下图所示：a页面点击跳转按钮后在b页面可以获取到对应的值。代码如下：a页面:<...
点击按钮滚动跳转到DIV
BabyZxd的博客
11-23 266
需求：博客文章的目录，点击目录，滚动到对应的内容 <html> <div class="box"> <button>按钮</button> <ul> <li v-for="(item,index) in 100" :key="index"> aa{{item}}
分享HTML页面跳转的5种方法
hdxx2022的博客
02-19 9816
下面列了五个例子来详细说明，这几个例子的主要功能是：在5秒后，自动跳转到同目录下的hello.html（根据自己需要自行修改）文件。缺点：firefox不支持（firefox不支持span、div等的innerText属性）3") 结合了倒数的javascript实现（firefox）-- 以下方式只是刷新不跳转到其他页面 -->3) 结合了倒数的javascript实现（IE）-- 以下方式定时转到其他页面 -->优点：灵活，可以结合更多的其他功能。缺点：受到不同浏览器的影响。5) 整合3)和3")
页面内跳转到指定div的几种方法（锚点、hash、animate、scrollIntoView）
I大俊
09-10 9582
页面内跳转到指定div的几种方法（锚点、hash、animate、scrollIntoView） 由于最近有回到顶部、根据nav定位到指定div和定位到输入错误的输入框的需求，所以在此分析此类需求可能的解决方案 用a标签的href属性 这是比较常用的一种方法 href。这是一个必需属性为锚定义一个超文本链接来源。这表示链接目标的URL或URL片段。URL片段是由一个hash符号（...
VUE点击DIV跳转链接
最新发布
06-07
你可以在 Vue 的模板中使用 `router-link` 组件来实现点击 `div` 跳转链接的功能。具体做法如下： 1. 在 Vue 组件中引入 `router-link` 组件： ```javascript <template> <div> <router-link to="/your-link">点击此处跳转链接</router-link> </div> </template> ``` 2. 在 `to` 属性中指定要跳转的链接地址，例如 `to="/your-link"`。 3. 如果你想要使用 `div` 标签来代替 `router-link` 组件，可以将 `div` 标签的 `onclick` 事件绑定到 `$router.push()` 方法上，例如： ```javascript <template> <div onclick="toYourLink()">点击此处跳转链接</div> </template> <script> export default { methods: { toYourLink() { this.$router.push('/your-link') } } } </script> ``` 这样就可以实现点击 `div` 跳转链接的功能了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

VibMike

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值