<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <style >

     body{text-align:center}

     div{align:center}

 </style>

 <title>无标题文档</title>

 </head>

 <body>

 <select id="option" onchange="change()">

     <option value="1">图片1</option>

     <option value="2">图片2</option>

     <option value="3">图片3</option>

     <option value="4">图片4</option>

 </select>

 <br /><br /><br /><br />

 <div class="images" width="790px" >

     <div align="center">

         <img id="1"width="790px" height="340px" src="../../课堂练习/js03/59a7a48aN7a42d3fe.jpg" style="display:block"/>

         <img id="2"width="790px" height="340px" src="../../课堂练习/js03/59cc929fNaebef801.jpg" style="display:none"/>

         <img id="3"width="790px" height="340px" src="../../课堂练习/js03/59ccc986Nbf17e33e.jpg" style="display:none"/>

         <img id="4"width="790px" height="340px"src="../../课堂练习/js03/59ccec77N64688a8d.jpg" style="display:none"/>

     </div>

 </div>

 <script>

     function change(){

         var opt=document.getElementById("option");

         if(opt.value=="1"){

             var images=document.getElementsByTagName("img");

             for(var i=0;i<images.length;i++){

                 if(images[i].id==1){

                 images[i].style.display="block";

             }else{

                 images[i].style.display="none";

             }

             }

         }

         if(opt.value=="2"){

             var images=document.getElementsByTagName("img");

             for(var i=0;i<images.length;i++){

                 if(images[i].id==2){

                 images[i].style.display="block";

             }else{

                 images[i].style.display="none";

             }

             }

         }

         if(opt.value=="3"){

             var images=document.getElementsByTagName("img");

             for(var i=0;i<images.length;i++){

                 if(images[i].id==3){

                 images[i].style.display="block";

             }else{

                 images[i].style.display="none";

             }

             }

         }

         if(opt.value=="4"){

             var images=document.getElementsByTagName("img");

             for(var i=0;i<images.length;i++){

                 if(images[i].id==4){

                 images[i].style.display="block";

             }else{

                 images[i].style.display="none";

             }

             }

         }

     }

 </script>

 </body>

 </html>

js中onchange（）的使用，实现功能，选择哪一张图片，显示哪一张的更多相关文章

  1. js中给easyUI年份，月份选择下拉框赋值

    sp中定义 js中初始化 //年度下拉框初始化 $("#yearChoose").combobox({    valueField:'year',     textField:'y ...

  2. JS中部分不常用小功能记录

    1.serializeArray()在表单中使用,必须在form标签中,需要手机的元素要有name属性.源生JS将对象转成json   resulrMK = JSON.stringify(resulr ...

  3. JS中关于 一个关于计时器功能效果的实现

    optionSearch(); function optionSearch() { //定义一个清除计时器的变量 var timer = null; //自选标题区域 $("#optiona ...

  4. 怎样在 js 中实现 反转字符串 的功能?

    "string".split('').reverse().join('');

  5. 在vue中使用微信jssdk的getLocalImgData怎么让多张图片显示

    在循环里添加了一个异步请求类型的,所以我让他每次执行完毕后再执行下一次操作,其中用到了async 和 await,将异步变为同步去执行. 1 // 图片上传 2 handleImage(typeVal ...

  6. 前端之js中的函数

    函数 函数就是重复执行的代码片.   函数定义与执行 <script type="text/javascript">     // 函数定义     function ...

  7. JS事件 编程练习-自制计算器 使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。

    编程练习 使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElement ...

  8. 在js中怎么样选择互斥的相邻元素

    在使用jquery中,我们通常会选择siblings()去选择相邻元素,使用eq()方法去匹配元素,使用index()获取对应元素的索引值,具体jquery代码如下: <style> *{ ...

  9. 【原创】js中利用cookie实现记住密码功能

    在登录界面添加记住密码功能,我首先想到的是在java后台中调用cookie存放账号密码,大致如下: HttpServletRequest request HttpServletResponse res ...

随机推荐

  1. 精讲JS逻辑运算符&&、||，位运算符|，&

    1.JS中的||符号: 运算方法: 只要“||”前面为false,不管“||”后面是true还是false,都返回“||”后面的值. 只要“||”前面为true,不管“||”后面是true还是fals ...

  2. VirtualBox——在Win7的HOST上安装配置虚拟机CentOS7

    在Win7为HOST的环境下,安装VirtualBox,在其中安装CentOS7,以Bridge的方式搭建网络环境. 主要配置包括VirtualBox中的网络设置,以及CentOS中的网络配置.另外还 ...

  3. setHasFixedSize(true)的意义 （转）

    RecyclerView setHasFixedSize(true)的意义 2017年07月07日 16:23:04 阅读数:6831 <span style="font-size:1 ...

  4. Orcal nvl函数

    NVL(E1, E2)的功能为:如果E1为NULL,则函数返回E2,否则返回E1本身.但此函数有一定局限,所以就有了NVL2函数. 拓展:NVL2函数:Oracle/PLSQL中的一个函数,Oracl ...

  5. MyEclipse中Tomcat导入项目并且修改了项目名字，项目后面的括号显示原来项目的名字，怎么修改？

    MyEclipse中Tomcat导入项目并且修改了项目名字,项目后面的括号显示原来项目的名字,怎么修改? 1.打开路径\你的项目名称,修改文件.project 2.打开路径\你的项目名称\.setti ...

  6. 利用Bag中的getCount()方法统计list集合中重复元素

    实际应用场景:从Excel导入数据时,存在某个标识符相同的多条数据,需要进行合并,因此需要统计重复元素,可以利用Bag包下的getCount()进行统计,代码如下: package test.com. ...

  7. k8s1.11.0安装、一个master、一个node、查看node名称是ip、node是扩容进来的、带cadvisor监控服务

    一个master.一个node.查看node节点是ip # 安装顺序:先在test1 上安装完必要组件后,就开始在 test2 上单独安装node组件,实现node功能,再返回来配置test1加入集群 ...

  8. Ubuntu 16.04安装anaconda3

    首先下载anaconda3镜像,清华大学开源软件镜像站下载地址:https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/ 因为实验需要用到tenso ...

  9. CentOS下Vim加密解密文本

    CentOS用vim/vi给文件加密和解密 一. 利用 vim/vi 加密: 优点:加密后,如果不知道密码,就看不到明文,包括root用户也看不了: 缺点:很明显让别人知道加密了,容易让别人把加密的文 ...

  10. 神经网络中batch_size参数的含义及设置方法

    本文作者Key,博客园主页:https://home.cnblogs.com/u/key1994/ 本内容为个人原创作品,转载请注明出处或联系:zhengzha16@163.com 在进行神经网络训练 ...