JS动态添加的div点击跳转到另一页面实现代码
更新时间：2017年09月30日 14:37:15 作者：596785154
这篇文章主要介绍了JS动态添加的div点击跳转到另一页面实现代码,需要的朋友可以参考下
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点击跳转到另一页面实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
弹出层想必大家都有见过吧，本示例介绍的是一个定位至屏幕居中的弹出层，个人感觉效果还不错，感兴趣的朋友可以参考下2014-05-05
很喜欢 蔡蔡 的这个标题，实际蔡蔡已经分析过了，这里借用了。或许有点标题党的意思。看完就知了。2011-03-03
变量作用域是每门编程语言都会涉及的话题，也是作为一名程序员必需掌握的知识点，能深入掌握变量作用域更有助于你编写稳定的程序。2009-10-10
这篇文章主要介绍了JavaScript中的原始值和复杂值 的相关资料,需要的朋友可以参考下2016-01-01
使用js获取cookie或许你会，但是要获取指定cookie，你会吗？下面有个不错的示例，大家可以参考下2014-02-02
图片img的src不变,想让浏览器重新加载怎么办,在图片地址src不变的情况下让浏览器重新加载图片,实际上在src不变时，浏览器直接就去读取缓存2013-03-03
类型检查是一种静态分析的过程，用于验证变量、函数和表达式的类型是否符合预期，这篇文章主要来和大家聊聊TypeScript中类型检查与错误捕获的相关知识，希望对大家有所帮助2023-06-06
本文将详细介绍利用JQuery和JS实现奇偶行背景颜色自定义效果,需要的朋友可以参考下2012-11-11
这篇文章主要介绍了js高手进阶实用语法的高级写法的相关资料,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了js获取video任意时间的画面截图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
最新评论