鱼C论坛

 找回密码
 立即注册
查看: 3860|回复: 29

[每日一练] 技法68 (◐‿◑) 打开新页面 | 【新征程】

[复制链接]
发表于 2017-10-28 11:55:02 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 不二如是 于 2017-10-28 22:19 编辑


                               
登录/注册后可看大图


按照提示,完成代码,秀秀你的编程能力!

不许看答案,否则打屁屁





分析:
        在日常的项目中,最常用的效果就是打开新页面

        例如:在鱼C点开你关注的页面就会跳转到那里。

        在HTML代码中,通过<a>标签即可实现不同B格的跳转功能,那么Js中是如何实现的呢?   





Code

HTML:
  1. <h2>打开新页面</h2>
  2.     <input id='openNewPage' data-href='http://www.fishc.com/' type="button" value="鱼C官网" />
复制代码


JS:
  1. <script type="text/javascript">
  2.     window.onload = function(){
  3.         var openNewPage = function(e){
  4.             /*
  5.              在原来的窗口中,直接跳转至目标页面
  6.              window.location.href="将要跳转的页面";

  7.              在新窗口中打开页面
  8.              window.open('将要跳转的页面');
  9.              window.history.back(-1);返回上一页

  10.              通过指定的URL替换当前的页面及缓存内容,导致跳转页面后没有后退功能
  11.              window.location.replace("将要跳转的页面")

  12.              通过文档头META跳转: CONTENT 后面的阿拉伯数字是代表过几秒中钟转入目标网页,URL是目标地址
  13.              <META HTTP-EQUIV="Refresh" CONTENT="0;URL= "将要跳转的页面">
  14.              */
  15.             e.onclick = function(){
  16.                 window.location.href = this.getAttribute('data-href');//通过第一条的方式跳转页面
  17.             }
  18.         }
  19.         openNewPage(document.getElementById("openNewPage"))
  20.     };
  21. </script>
复制代码






请按照自己的理解订正对概念的认知


代码说明(秀智商
游客,如果您要查看本帖隐藏内容请回复





回顾:






源代码: index.zip (904 Bytes, 下载次数: 8, 售价: 5 鱼币)





如果喜欢,请订阅


如果喜欢,别忘了评分


                               
登录/注册后可看大图

评分

参与人数 2荣誉 +11 鱼币 +11 贡献 +9 收起 理由
a211827754 + 5 + 5 + 3 无条件支持楼主!
小甲鱼 + 6 + 6 + 6 支持楼主!

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-10-28 21:28:35 | 显示全部楼层
小而美的代码~

点评

我很赞同!: 5.0
我很赞同!: 5
隆恩,钦点  发表于 2017-10-28 22:03
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-10-29 20:22:44 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-3-13 09:11:04 | 显示全部楼层
Merci.
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-7-9 10:28:44 | 显示全部楼层
看看代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-7-15 03:04:40 | 显示全部楼层
6666666666666666
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-7-26 08:19:12 From FishC Mobile | 显示全部楼层
666
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-8-5 20:26:25 | 显示全部楼层
我使用jQ
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-9-6 11:53:13 | 显示全部楼层
111
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-9-16 15:38:28 | 显示全部楼层
呃呃呃呃呃
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-9-20 10:19:34 | 显示全部楼层
答案掳走
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-10-10 22:32:36 | 显示全部楼层
0
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-11-4 14:34:14 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-12-14 13:19:49 | 显示全部楼层
kanbudong
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-2-10 12:57:08 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-2-11 11:38:38 | 显示全部楼层
看看
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-3-8 11:13:40 | 显示全部楼层
???
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-5-27 10:14:12 | 显示全部楼层
kankan
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-7-3 09:23:41 | 显示全部楼层
打卡打卡
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-9-28 11:35:33 | 显示全部楼层
......
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 12:49

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表