JS动态添加的div点击跳转到另一页面实现代码


Posted in Javascript onSeptember 30, 2017

 div调用函数跳转:

var obj = document.getElementById('id');
obj.onclick=function(){ 
  window.location.href="跳转的地址" rel="external nofollow" ;      
 }

源文件:

<!DOCTYPE html>
<html>
<head>
  <title>首页推荐页面</title>
  <meta name="author" content="Chunna.zheng"/>
  <meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8"/>
  <style type="text/css">
    div.recommendclass {
      width: 100%;
      height: 60px;
      line-height: 60px;
      vertical-align: middle;
      font-size: 18px;
      text-align: center; /*文字水平居中对齐*/
      background-color: #f5f5f5;
    }
    .mall_contentChild1Class {
      display: inline;
      width: 40%;
      height: 100px;
      background-color: #f5f5f5;
    }
    .mall_contentChild2Class {
      display: inline;
      width: 60%;
      height: 100px;
      float: right;
      position: relative;
      background-color: #f5f5f5;
    }
    .mall_contentChild2BottomClass {
      display: table-cell;
      width: 90%;
      vertical-align: bottom;
      position: absolute;
      left: 5px;
      bottom: 5px;
      background-color: #f5f5f5;
    }
    .mall_Child2TextLeftClass {
      line-height: 16px;
      vertical-align: bottom;
      background-color: #f5f5f5;
    }
    .mall_Child2TextRightClass {
      float: right;
      color: #f3b041;
      font-size: 25px;
      line-height: 26px;
      vertical-align: bottom;
      background-color: #f5f5f5;
    }
    .news_title {
      display: block;
      font-size: 18px;
      vertical-align: center;
      background-color: #f5f5f5;
    }
    .news_message {
      display: block;
      font-size: 14px;
      vertical-align: center;
      background-color: #f5f5f5;
    }
    .news_time {
      display: block;
      font-size: 12px;
      vertical-align: bottom;
      position: absolute;
      bottom: 5px;
      right: 5px;
      background-color: #f5f5f5;
    }
  </style>
</head>
<body style="margin: 0; padding: 0 ">
<div id="mall_news" class="recommendclass">新闻咨讯</div>
<div id="news_content" style="background-color:#f5f5f5"></div>
<script>
  var Shu = 2;
  var df = document.createElement("div");
  for (var i = 0; i <= Shu; i++) {
    var oDiv = document.createElement("div");
    var divChild1 = document.createElement("div");
    divChild1.className = 'mall_contentChild1Class';
    var img = document.createElement("img");
    img.style.width = "130px";
    img.style.height = "100px";
    img.src = 'ic_mall_good_stuff.jpg';
    divChild1.appendChild(img);
    oDiv.appendChild(divChild1);
    var divChild2 = document.createElement("div");
    divChild2.className = 'mall_contentChild2Class';
    var text1 = document.createElement("span");
    text1.className = 'news_title';
    text1.innerHTML = "我是标题";
    divChild2.appendChild(text1);
    var bottomDiv = document.createElement("div");
    var textLeft = document.createElement("span");
    textLeft.className = 'news_message';
    textLeft.innerHTML = "我是内容";
    bottomDiv.appendChild(textLeft);
    var textRight = document.createElement("span");
    textRight.className = 'news_time';
    textRight.innerHTML = "2017.09.23";
    bottomDiv.appendChild(textRight);
    divChild2.appendChild(bottomDiv);
    oDiv.appendChild(divChild2);
    //添加点击事件
    oDiv.onclick = function(){
      window.location.href="file:///android_asset/news.html" rel="external nofollow" ;
    }
    df.appendChild(oDiv);
  }
  document.getElementById("news_content").appendChild(df);
</script>
</body>
</html>

总结

以上所述是小编给大家介绍的JS动态添加的div点击跳转到另一页面实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
De facto standard 世界上不可思议的事实标准
Aug 29 Javascript
浅谈JavaScript函数节流
Dec 09 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
Mar 01 Javascript
jquery实现动静态条形统计图
Aug 17 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
Apr 01 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
React-Native使用Mobx实现购物车功能
Sep 14 Javascript
JavaScript实现打印星型金字塔功能实例分析
Sep 27 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
May 08 Javascript
在vue 中使用 less的教程详解
Sep 26 Javascript
vue下使用nginx刷新页面404的问题解决
Aug 02 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
Sep 30 #Javascript
jqgrid实现简单的单行编辑功能
Sep 30 #Javascript
微信小程序富文本渲染引擎的详解
Sep 30 #Javascript
js实现数组和对象的深浅拷贝
Sep 30 #Javascript
node通过express搭建自己的服务器
Sep 30 #Javascript
react-native中ListView组件点击跳转的方法示例
Sep 30 #Javascript
详解在Vue中有条件地使用CSS类
Sep 30 #Javascript
You might like
PHP 文件系统详解
2012/09/13 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
PHP上传Excel文件导入数据到MySQL数据库示例
2016/10/25 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
用jquery实现等比例缩放图片效果插件
2010/07/24 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
jQuery实现自定义下拉列表
2015/01/05 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
基于Vue.js实现数字拼图游戏
2016/08/02 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
如何编写jquery插件
2017/03/29 jQuery
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
了解重排与重绘
2019/05/29 Javascript
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
2019/09/25 Javascript
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python BeautifulSoup使用方法详解
2013/11/21 Python
python通过exifread模块获得图片exif信息的方法
2015/03/16 Python
Python Sql数据库增删改查操作简单封装
2016/04/18 Python
python编程实现12306的一个小爬虫实例
2017/12/27 Python
python批量修改文件编码格式的方法
2018/05/31 Python
python获取地震信息 微信实时推送
2019/06/18 Python
python groupby 函数 as_index详解
2019/12/16 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
5 个强大的HTML5 API 函数推荐
2014/11/19 HTML / CSS
html5视频自动横过来自适应页面且点击播放功能的实现
2020/06/03 HTML / CSS
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
客户服务经理岗位职责
2014/01/29 职场文书
关于清明节的演讲稿
2014/09/13 职场文书
单位接收函范文
2015/01/30 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
社区低保工作总结2015
2015/07/23 职场文书
【海涛教你打DOTA】剑圣第一人称视角解说
2022/04/01 DOTA
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python