zoukankan html css js c++ java

js中onchange（）的使用，实现功能，选择哪一张图片，显示哪一张

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <style >
 6     
 7     body{text-align:center}
 8     div{align:center}
 9 
10 
11 </style>
12 <title>无标题文档</title>
13 </head>
14 
15 <body>
16 
17 <select id="option" onchange="change()">
18     <option value="1">图片1</option>
19     <option value="2">图片2</option>
20     <option value="3">图片3</option>
21     <option value="4">图片4</option>
22     
23 </select>
24 <br /><br /><br /><br />
25 <div class="images" width="790px" >
26     <div align="center">
27         <img id="1"width="790px" height="340px" src="../../课堂练习/js03/59a7a48aN7a42d3fe.jpg" style="display:block"/>
28         <img id="2"width="790px" height="340px" src="../../课堂练习/js03/59cc929fNaebef801.jpg" style="display:none"/>
29         <img id="3"width="790px" height="340px" src="../../课堂练习/js03/59ccc986Nbf17e33e.jpg" style="display:none"/>
30         <img id="4"width="790px" height="340px"src="../../课堂练习/js03/59ccec77N64688a8d.jpg" style="display:none"/>
31     </div>
32 </div>
33 <script>
34     function change(){
35         var opt=document.getElementById("option");
36         if(opt.value=="1"){
37             var images=document.getElementsByTagName("img");
38             for(var i=0;i<images.length;i++){
39                 if(images[i].id==1){
40                 images[i].style.display="block";
41             }else{
42                 images[i].style.display="none";
43             }
44             }
45         }
46         if(opt.value=="2"){
47             var images=document.getElementsByTagName("img");
48             for(var i=0;i<images.length;i++){
49                 if(images[i].id==2){
50                 images[i].style.display="block";
51             }else{
52                 images[i].style.display="none";
53             }
54             }
55         }
56         if(opt.value=="3"){
57             var images=document.getElementsByTagName("img");
58             for(var i=0;i<images.length;i++){
59                 if(images[i].id==3){
60                 images[i].style.display="block";
61             }else{
62                 images[i].style.display="none";
63             }
64             }
65         }
66         if(opt.value=="4"){
67             var images=document.getElementsByTagName("img");
68             for(var i=0;i<images.length;i++){
69                 if(images[i].id==4){
70                 images[i].style.display="block";
71             }else{
72                 images[i].style.display="none";
73             }
74             }
75         }
76         
77         
78         
79     }
80 
81 </script>
82 
83 </body>
84 </html>

查看全文

相关阅读:
《精益创业埃里克莱斯》精读读书笔记总结----《创业必读书第6本》--创业第二关跑通业务：如何快速完成从0到1的业务验证的第1本
 deque STL 深入剖析 TODO
leetcode 901 股票价格跨度
 「学习笔记」多项式 I
专题讨论【索引失效】
手撕代码和笔试题
 如何通过科学的方法来在win10运用office 技术
 js es6 map函数
 数据分析中的'疑难杂症'小结（一）
吴恩达机器学习作业1- 线性回归作业（python实现）

原文地址：https://www.cnblogs.com/lyxcode/p/7707861.html