溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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 >
<div id="mall_news" class="recommendclass">新聞咨訊</div>
<div id="news_content" ></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點擊跳轉到另一頁面實現代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
