js动态添加的div点击跳转到另一页面

最新推荐文章于 2024-04-26 15:41:37 发布

596785154

最新推荐文章于 2024-04-26 15:41:37 发布

阅读量3.3k

点赞数

分类专栏： web-app成长中

本文链接：https://blog.csdn.net/zcn596785154/article/details/78141229

版权

web-app成长中专栏收录该内容

20 篇文章 0 订阅

订阅专栏

div调用函数跳转：

var obj = document.getElementById('id');
obj.onclick=function(){  
    window.location.href="跳转的地址";            
 }

源文件：

<!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";
        }
        df.appendChild(oDiv);
    }
    document.getElementById("news_content").appendChild(df);
</script>
</body>
</html>

596785154

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js动态添加的div点击跳转到另一页面

div调用函数跳转：var obj = document.getElementById('id');obj.onclick=function(){ window.location.href="跳转的地址"; }源文件：<!DOCTYPE html><html><head> <title>首页推荐页面</title> <meta name="
复制链接

扫一扫

专栏目录