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 相关文章推荐
我见过最全的个人js加解密功能页面
Dec 12 Javascript
跟着JQuery API学Jquery 之三 筛选
Apr 09 Javascript
javascript动态改变img的src属性图片不显示的解决方法
Oct 20 Javascript
node.js中的fs.utimesSync方法使用说明
Dec 15 Javascript
jquery实现的树形目录实例
Jun 26 Javascript
js改变html的原有内容实现方法
Oct 05 Javascript
javascript显示系统当前时间代码
Dec 29 Javascript
原生和jQuery的ajax用法详解
Jan 23 Javascript
微信小程序实现自定义picker选择器弹窗内容
May 26 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
Sep 10 Javascript
vue 函数调用加括号与不加括号的区别
Oct 29 Javascript
JS实现京东商品分类侧边栏
Dec 11 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.ini中添加extension=php_mysqli.dll指令的说明
2007/06/14 PHP
php上传图片客户端和服务器端实现方法
2015/03/30 PHP
php中使用in_array() foreach array_search() 查找数组是否包含时的性能对比
2015/04/14 PHP
禁止直接访问php文件代码分享
2020/05/05 PHP
浅谈PHP之ThinkPHP框架使用详解
2020/07/21 PHP
HR vs CL BO3 第二场 2.13
2021/03/10 DOTA
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
jQuery检测某个元素是否存在代码分享
2015/07/09 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
2015/10/27 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
创建echart多个联动的示例代码
2018/11/23 Javascript
Vue如何实现监听组件原生事件
2020/07/03 Javascript
pandas通过loc生成新的列方法
2018/11/28 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
Django 实现将图片转为Base64,然后使用json传输
2020/03/27 Python
python由已知数组快速生成新数组的方法
2020/04/08 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
会计助理的岗位职责
2013/11/29 职场文书
小学中秋节活动方案
2014/02/06 职场文书
小溪流的歌教学反思
2014/02/13 职场文书
房地产推广策划方案
2014/05/19 职场文书
2014公司党员自我评价范文
2014/09/11 职场文书
借名购房协议书范本
2014/10/06 职场文书
学校捐书活动总结
2015/05/08 职场文书
MySQL 存储过程的优缺点分析
2021/05/20 MySQL
Python OpenGL基本配置方式
2022/05/20 Python