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 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
Aug 29 Javascript
JS判断表单输入是否为空(示例代码)
Dec 23 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
May 27 Javascript
js实现tab切换效果实例
Sep 16 Javascript
用原生js统计文本行数的简单示例
Aug 19 Javascript
详解jQuery选择器
Dec 21 Javascript
用director.js实现前端路由使用实例
Jan 27 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
May 24 Javascript
js回文数的4种判断方法示例
Jun 04 Javascript
JS模拟浏览器实现全局搜索功能
Sep 11 Javascript
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
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
PHP4实际应用经验篇(1)
2006/10/09 PHP
php实现无限级分类实现代码(递归方法)
2011/01/01 PHP
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
javascript 主动派发事件总结
2011/08/09 Javascript
jQuery 1.8 Release版本发布了
2012/08/14 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
使用js简单实现了tree树菜单
2013/11/20 Javascript
jquery右下角自动弹出可关闭的广告层
2015/05/08 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
2015/11/17 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
Bootstrap栅格系统的使用详解
2017/10/30 Javascript
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
redux-saga 初识和使用
2018/03/10 Javascript
详解jQuery获取特殊属性的值以及设置内容
2018/11/14 jQuery
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
关于vue组件事件属性穿透详解
2019/10/28 Javascript
JS判断数组是否包含某元素实现方法汇总
2020/06/24 Javascript
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python中类的定义、继承及使用对象实例详解
2015/04/30 Python
python3实现windows下同名进程监控
2018/06/21 Python
美国山地自行车、露营、户外装备和服装购物网站:Aventuron
2018/05/05 全球购物
实习自荐信
2013/10/13 职场文书
老公给老婆的道歉信
2014/01/10 职场文书
自行车租赁公司创业计划书
2014/01/28 职场文书
电焊工工作岗位职责
2014/02/06 职场文书
大学活动总结格式
2014/04/29 职场文书
实习计划书范文
2015/01/16 职场文书
2016见义勇为事迹材料汇总
2016/03/01 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书
德劲DE1107指针试高灵敏度全波段收音机机评
2022/04/05 无线电
Redis全局ID生成器的实现
2022/06/05 Redis