JS动态添加的div点击跳转到另一页面实现代码
程序员文章站
2022-04-09 21:47:13
div调用函数跳转：
var obj = document.getelementbyid('id');
obj.onclick=function()...
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点击跳转到另一页面实现代码，希望对大家有所帮助
上一篇： 微信小程序之数据缓存的实例详解
下一篇： Vue如何从1.0迁移到2.0