JS動態添加的div點擊跳轉到另一頁面實現代碼

來源：懂視網責編：小采時間：2020-11-27 22:28:38

JS動態添加的div點擊跳轉到另一頁面實現代碼

JS動態添加的div點擊跳轉到另一頁面實現代碼: div調用函數跳轉： var obj = document.getElementById('id'); obj.onclick=function(){ window.location.href=跳轉的地址 rel=external nofollow ; } 源文件： <!DOCTYPE html> <html>

推薦度：

點擊下載本文 文檔為doc格式

導讀JS動態添加的div點擊跳轉到另一頁面實現代碼: div調用函數跳轉： var obj = document.getElementById('id'); obj.onclick=function(){ window.location.href=跳轉的地址 rel=external nofollow ; } 源文件： <!DOCTYPE html> <html>

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點擊跳轉到另一頁面實現代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com