首页 > 开发 > JS > 正文

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

2024-05-06 16:40:07
字体:
来源:转载
供稿:网友

 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点击跳转到另一页面实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对VeVb武林网网站的支持!


注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表