js中onchange（）的使用，实现功能，选择哪一张图片，显示哪一张
2024-09-04 01:10:16
<!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>
最新文章
- 锋利的jquery-读书笔记(一)
- ES(二):Kibana
- vi常用命令
- rdc21n（研发与设计综合讨论）博客开通了！
- [原创]java WEB学习笔记65：Struts2 学习之路--Struts的CRUD操作( 查看 / 删除/ 添加) ModelDriven拦截器 paramter 拦截器
- Linux定时任务Crontab执行PHP脚本
- Yii 框架表单验证---实例
- 菜鸟-手把手教你把Acegi应用到实际项目中(10)-保护业务方法
- 【HDOJ】2579 Dating with girls(2)
- The executable was signed with invalid entitlements.
- IIS的安装
- 《Java从入门到精通》src0-8
- HBase Maven 工程模块梳理
- linux 内核的spinlock
- 计蒜客的一道题dfs
- Kaggle竞赛 —— 房价预测 (House Prices)
- Winform DevExpress控件库（一） DevExpress控件库的安装与新建第一个DevExpress项目
- window.location.href 传参中文乱码问题！！！
- Oracle使用学习笔记(一)
- temp--内蒙农信出差