【前端积累】点击切换图片和文字

 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 = 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 }