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 相关文章推荐
jQuery 三击事件实现代码
Sep 11 Javascript
可恶的ie8提示缺少id未定义
Mar 20 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
js通过iframe加载外部网页的实现代码
Apr 05 Javascript
jquery获取当前元素索引值用法实例
Jun 10 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
javascript 小数乘法结果错误的处理方法
Jul 28 Javascript
详解vue嵌套路由-query传递参数
May 23 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
Dec 08 Javascript
vue.js高德地图实现热点图代码实例
Apr 18 Javascript
vue-cli点击实现全屏功能
Mar 07 Javascript
JS+Canvas实现五子棋游戏
Aug 26 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 shell命令合并图片的代码
2011/06/23 PHP
php获取flash尺寸详细数据的方法
2016/11/12 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
JavaScript?Apple设备检测示例代码
2013/11/15 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
JavaScript Promise启示录
2014/08/12 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
jQuery实现带水平滑杆的焦点图动画插件
2016/03/08 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
5分钟打造简易高效的webpack常用配置
2017/07/04 Javascript
vue 组件中添加样式不生效的解决方法
2018/07/06 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
Vue中用JSON实现刷新界面不影响倒计时
2020/10/26 Javascript
vue $router和$route的区别详解
2020/12/02 Vue.js
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
windows系统下Python环境搭建教程
2017/03/28 Python
TensorFlow实现RNN循环神经网络
2018/02/28 Python
Python opencv实现人眼/人脸识别以及实时打码处理
2019/04/29 Python
python实现吃苹果小游戏
2020/03/21 Python
keras中的backend.clip用法
2020/05/22 Python
英国一家专门出售品牌鞋子的网站:Allsole
2016/08/07 全球购物
外贸英语毕业生自荐信
2013/11/14 职场文书
电气工程和自动化自荐信范文
2013/12/25 职场文书
CAD制图设计师自荐信
2014/01/29 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
Python如何把不同类型数据的json序列化
2021/04/30 Python
python数据可视化JupyterLab实用扩展程序Mito
2021/11/20 Python
Python写情书? 10行代码展示如何把情书写在她的照片里
2022/04/21 Python