首页 > 代码库 > 【前端积累】点击切换图片和文字
【前端积累】点击切换图片和文字
1 <!DOCTYPE html> 2 <html><!--树根--> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <title>Image Gallery</title> 8 <meta name="description" content="An interactive getting started guide for Brackets."> 9 <script type="text/javascript" src="showpic.js"></script>10 <script type="text/javascript">11 //window.onload = countBodyChildren;12 </script>13 <link rel="stylesheet" href="css/image.css" type="text/css" media="screen"/>14 </head>15 <body>16 <!--nodeType属性总共有12种属性值，其中3种具有实用价值：元素节点、属性节点、文本节点 分别是 1 2 3-->17 18 <h1>Snapshots</h1>19 <ul>20 <li>21 <a href="image/fudan.jpg" title="fudan university" onclick="showPic(this); return false;">fudan</a>22 </li>23 <li>24 <a href="image/sunflower.jpg" title="sunflower" onclick="showPic(this);return false;">sunflower</a>25 </li>26 <li> <a href="image/waitan.jpg" title="waitan" onclick="showPic(this);return false;">waitan</a>27 </li>28 <li>29 <a href="image/lijiang.jpg" title="lijiang" onclick="showPic(this);return false;">lijiang</a>30 </li>31 </ul>32 <img id="placeholder" src="image/jiuzhaigou.jpeg" alt="my image gallery"/>33 <p id="description">Choose an image.</p> 34 </body>35 </html>
1 body { 2 font-family: "Helvetica","Arial",sans-serif; 3 color: #333; 4 background-color: #ccc; 5 margin: 1em 10%; 6 } 7 h1 { 8 color: #333; 9 background-color: transparent;10 }11 a {12 color: #c60;13 background-color: transparent;14 font-weight: bold;15 text-decoration: none;16 }17 ul {18 padding: 0;19 }20 li {21 float: left;22 padding: 1em;23 list-style: none;24 }
1 function showPic(whichpic) { 2 var source = whichpic.getAttribute("href"); 3 var placeholder = document.getElementById("placeholder"); 4 placeholder.setAttribute("src", source); 5 var text = whichpic.getAttribute("title"); 6 var description = document.getElementById("description"); 7 //alert(description.firstChild.nodeValue); 8 description.firstChild.nodeValue =http://www.mamicode.com/ text; 9 }10 11 function countBodyChildren(){12 var body_element = document.getElementsByTagName("body")[0];13 alert(body_element.childNodes.length);14 alert(body_element.nodeType);15 }
【前端积累】点击切换图片和文字
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。