Maison > Article > interface Web > Implémentation JS de div cliquez pour passer à une autre page, exemple de code
Cet article présente principalement le code pour implémenter le p cliquez pour accéder à une autre page ajoutée dynamiquement par JS. Les amis dans le besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.
saut de fonction d'appel p :
var obj = document.getElementById('id'); obj.onclick=function(){ window.location.href="跳转的地址" rel="external nofollow" ; }
Fichier source :
<!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"> p.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 "> <p id="mall_news" class="recommendclass">新闻咨讯</p> <p id="news_content" style="background-color:#f5f5f5"></p> <script> var Shu = 2; var df = document.createElement("p"); for (var i = 0; i <= Shu; i++) { var op = document.createElement("p"); var pChild1 = document.createElement("p"); pChild1.className = 'mall_contentChild1Class'; var img = document.createElement("img"); img.style.width = "130px"; img.style.height = "100px"; img.src = 'ic_mall_good_stuff.jpg'; pChild1.appendChild(img); op.appendChild(pChild1); var pChild2 = document.createElement("p"); pChild2.className = 'mall_contentChild2Class'; var text1 = document.createElement("span"); text1.className = 'news_title'; text1.innerHTML = "我是标题"; pChild2.appendChild(text1); var bottomp = document.createElement("p"); var textLeft = document.createElement("span"); textLeft.className = 'news_message'; textLeft.innerHTML = "我是内容"; bottomp.appendChild(textLeft); var textRight = document.createElement("span"); textRight.className = 'news_time'; textRight.innerHTML = "2017.09.23"; bottomp.appendChild(textRight); pChild2.appendChild(bottomp); op.appendChild(pChild2); //添加点击事件 op.onclick = function(){ window.location.href="file:///android_asset/news.html" rel="external nofollow" ; } df.appendChild(op); } document.getElementById("news_content").appendChild(df); </script> </body> </html>
Recommandations associées :
Limitation de la fonction de l'applet WeChat, comment empêcher plusieurs sauts de clics
Comment utiliser JS pour cliquer pour sauter Connexion adresse e-mail personnelle
Mui utilise jquery et utilise le clic pour passer à une nouvelle fenêtre de partage d'exemple
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!