标签：
1. 做什么？
用选择按钮切换图片。 具体效果如下：
2. 工具
用记事本，或者Dreamweaver( 如果害怕自己敲错字母~），来编写代码。
用火狐浏览器做调试。 我是这么试的， 不得不说页面做得丑死了。
3. 思路
首先用HTML把单选按钮和图片都创建出来， 然后编写JS， 把单选按钮和显示图片的事件绑定起来， 其中事件的思路是关闭其他图片，开启对应的图片。
4. 代码
<head>
<title>一行白鹭上青天</title>
</head>
<body>
<br/>
<div id="contentId" style="margin-left:20px">
<div style="float:left;padding-left:30px" name="pic"><img src="./apple.jpg" alt="诱人的苹果"/></div>
<div style="float:left;padding-left:60px" name="pic"><img src="./wine.jpg" alt="紫晶酒" width="200px" height="210px"/></div>
<div style="float:left;padding-left:10px" name="pic"><img src="./lemon.jpg" alt="灿烂的微笑"/></div>
</div>
<script>
window.onload=function(){
var heads = document.getElementsByName( ‘fruit‘ );
var contents = document.getElementsByName( ‘pic‘ );
var content = document.getElementById( ‘contentId‘ );
var i,j;
/*
** 关闭所有内容
*/
content.style.display = "none";
/*
** 把内容和表头绑定
*/
for( i = 0; i < heads.length; i ++ ){
heads [i].index = i;
heads [i].onclick = function(){
content.style.display = "block"; //开启内容框
for( j = 0; j < contents.length; j ++ ){
contents [j].style.display = "none";
}
contents [this.index].style.display = "block";
};
}
}
</script>
</body>
标签：
原文地址：http://www.cnblogs.com/the-one/p/5742949.html
