首頁 > 開發者 > JavaScript
標籤：innertext rip common set element a標籤 選擇 for htm
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> body { font-family: "Helvetica", "Arial", serif; color: #333; background-color: #ccc; margin: 1em 10%; } h1 { color: #333; background-color: transparent; } a { color: #c60; background-color: transparent; font-weight: bold; text-decoration: none; } ul { padding: 0; } li { float: left; padding: 1em; list-style: none; } #imagegallery { list-style: none; } #imagegallery li { margin: 0px 20px 20px 0px; padding: 0px; display: inline; } #imagegallery li a img { border: 0; } </style></head><body><h2> 美女畫廊</h2><ul id="imagegallery"> <li><a href="../images/1.jpg" title="美女A"> <img src="../images/1-small.jpg" width="100" alt="美女1"/> </a></li> <li><a href="../images/2.jpg" title="美女B"> <img src="../images/2-small.jpg" width="100" alt="美女2"/> </a></li> <li><a href="../images/3.jpg" title="美女C"> <img src="../images/3-small.jpg" width="100" alt="美女3"/> </a></li> <li><a href="../images/4.jpg" title="美女D"> <img src="../images/4-small.jpg" width="100" alt="美女4"/> </a></li></ul><div style="clear:both"></div><!--顯示大圖的--><img id="image" src="../images/placeholder.png" alt="" width="450"/><p id="des">選擇一個圖片</p><script src="common.js"></script><script> var aObj = my$("imagegallery").getElementsByTagName("a"); for(var i = 0; i< aObj.length; i++) { //為每個a標籤註冊點擊事件 aObj[i].onclick = function () { //為id為image的標籤的src賦值 my$("image").src = this.href; //為p標籤賦值 my$("des").innerText = this.title; //阻止超連結的預設跳轉 return false; }; }</script></body></html>
JavaScript DOM操作案例美女相簿
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
