点击一个按钮，动态加载不同的图片

最新推荐文章于 2021-11-26 15:43:38 发布
最新推荐文章于 2021-11-26 15:43:38 发布
阅读量2.6k 收藏
点赞数
分类专栏： jquery 文章标签： 点击一个按钮 动态加载不同的图片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36947128/article/details/78583160
版权

本文的核心就是data属性，在这里使用了data-num自定义属性。

通过swich 判断data-num 的值 来实现不同的图片加载。

 
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
	</head>

	<body>

		<div class="container">

			<!-- Modal -->
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<div class="modal-dialog" role="document">

					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
							<h4 class="modal-title">办理人身份证扫描件</h4>
						</div>

						<div class="modal-body">
							<img src="" id="exImg" width="100% " />
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

						</div>
					</div>
				</div>
			</div>

			<div class="header " role="navigation">
				<ul class="nav nav-tabs" role="tablist">
					<li role="presentation" class="active">
						<a href="#home" aria-controls="home" role="tab" data-toggle="tab">车辆综合信息表</a>
					</li>
					<li role="presentation">
						<a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">通信证综合信息表</a>
					</li>
					<li role="presentation">
						<a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">公司综合信息表</a>
					</li>

				</ul>

				<!-- Tab panes -->
				<div class="tab-content" style="margin-top: 10px">
					<div role="tabpanel" class="tab-pane  fade in active" id="home">
						<table class="table">
							<tbody>
								<tr>
									<td><label>车牌号头 7位</label></td>
									<td>鄂A45685</td>
									<td><label>车牌号尾 7位</label></td>
									<td>123456</td>
									<td><label>车辆类型</label></td>
									<td>轿车</td>
								</tr>
								<tr>
									<td><label>车辆归属</label></td>
									<td>个人</td>
									<td><label>申请主体</label></td>
									<td>个人</td>
									<td><label>公司法人姓名</label></td>
									<td>张三</td>
								</tr>
								<tr>
									<td><label>注册地址</label></td>
									<td>湖北省武汉市东西湖区</td>
									<td><label>营业执照号</label></td>
									<td>532501100006302</td>
									<td><label>营业执照扫描件</label></td>
									<td>
								<span style="color: cornflowerblue;cursor:pointer;" data-toggle="modal" data-target="#myModal" class="toggle" data-num="1"> 查看详情</span>
										
									</td>
								</tr>

								<tr>
									<td><label>办理人</label></td>
									<td>王五</td>
									<td><label>办理人电话</label></td>
									<td>13256899954</td>
									<td><label>办理人身份证号</label></td>
									<td>42038114456895555</td>
								</tr>

								<tr>
									<td><label>办理人身份证扫描件</label></td>
									<td><span style="color: cornflowerblue;cursor:pointer;" data-toggle="modal" data-target="#myModal" class="toggle" data-num="2">
  查看详情
</span></td>
									<td><label>办理人授权书</label></td>
									<td><span style="color: cornflowerblue;cursor:pointer;" data-toggle="modal" data-target="#myModal" class="toggle" data-num="3">
  查看详情
					<td><label>资质类型</label></td>
					<td>一类资质</td>
				</tr>
				
				
				<tr>
					<td class="title"><label>资质扫描件</label></td>
					<td><span style="color: cornflowerblue;cursor:pointer;" data-toggle="modal" data-target="#myModal" class="toggle"  data-num="4">
  查看详情
</span></td>
									<td><label>资质到期时间</label></td>
									<td>2017年5月10日</td>
									<td><label>通行证编码</label></td>
									<td>532501100006302</td>
								</tr>

								<tr>
									<td><label>通行证名称</label></td>
									<td>自由之翼</td>
									<td><label>通行证序列号</label></td>
									<td>89545552</td>
									<td><label>通行证开始时间</label></td>
									<td>2015年6月8日</td>
								</tr>

								<tr>
									<td><label>通行证结束时间</label></td>
									<td>2017年10月5日</td>
									<td><label>用途对应通行证类别</label></td>
									<td>高</td>
									<td><label>通行范围</label></td>
									<td>全省</td>
								</tr>

								<tr>
									<td><label>年内违章次数</label></td>
									<td>2</td>
									<td><label>年内未处理违章次数</label></td>
									<td>3</td>
									<td><label>通行证期内超区域次数</label></td>
									<td>3</td>
								</tr>

								<tr>
									<td><label>通行证期内超时间次数</label></td>
									<td>2</td>
									<td><label>通行证期内超速次数</label></td>
									<td>1</td>
									<td><label>通行证期内超载次数</label></td>
									<td>2</td>
								</tr>

								<tr>
									<td><label>往期通行证名称</label></td>
									<td>机动车驾驶证</td>
									<td><label>年审情况</label></td>
									<td>2017年4月5日</td>
									<td><label>保险情况</label></td>
									<td>再保</td>
								</tr>

								<tr>
									<td><label>保险额度</label></td>
									<td>50000元</td>
									<td><label>是否黑名单</label></td>
									<td>否</td>
									<td><label>综合评分</label></td>
									<td>5</td>
								</tr>

								<tr>
									<td><label>驾驶人姓名</label></td>
									<td>李四</td>
									<td><label>驾驶人身份证号</label></td>
									<td>450355513225452</td>
									<td><label>驾驶人情况</label></td>
									<td>正常</td>
								</tr>

								<tr>
									<td><label>异常情况</label></td>
									<td>良好</td>

								</tr>
							</tbody>
						</table>
					</div>

					<div role="tabpanel" class="tab-pane  fade" id="profile">
						
						
					</div>
					<div role="tabpanel" class="tab-pane  fade" id="messages">3</div>

				</div>

			</div>

		</div>

		<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script>
			$('#myTabs a').click(function(e) {
				e.preventDefault()
				$(this).tab('show')
			})
			$("#home tr td:even").css({ "background": "#f8f8f8", "width": "15%", "textAlign": "center" })
			$('#myModal').on('shown.bs.modal', function() {
				$('#myInput').focus()
			})
			$(".toggle").click(function() {
				$(".modal-title").text($(this).parent().prev().text());

				var num = $(this).attr("data-num");
				console.log(num)
				switch(num) {
					case "1":
						$("#exImg").attr("src", "img/timg2.jpg");
						break;

					case "2":
						$("#exImg").attr("src", "img/timg.jpg")
						break;
					case "3":
						$("#exImg").attr("src", "img/timg3.jpg")
						break;
					case "4":
						$("#exImg").attr("src", "img/timg4.jpg")
						break;
				}

			})
		</script>
	</body>

</html>


爱吃排骨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
点击UIButton按钮，按钮切换不同图片
WUYANYANstrong的博客
01-13 4011
1.viewDidLoad添加button [self.btnSwitch addTarget:self action:@selector(selectIconButton:) forControlEvents:UIControlEventTouchUpInside]; [self.btnSwitch setImage:[UIImage imageNamed:@"icon_s
按钮加载图片
啊哦的博客
04-07 324
CRect rectbutton; GetDlgItem(IDC_BUTTON_PERSON)->GetClientRect(rectbutton); HBITMAP hBitmap; hBitmap = (HBITMAP)::LoadImage( NULL, _T("icon_portrait.bmp"), //图片全路径 IMAGE_BITMAP,
在按纽中添加图片（一）
realsmy---久城的学习室
09-01 163
分析：利用按纽的构造函数来创建一个图标按纽查询API：JButton(Icon icon)                               创建一个带图标的按钮。我需要一个Icon，而Icon是一个接口，我必须寻找一个Icon接口的实现..于是找到了ImageIcon...javax.swing 类 ImageIcon一个 Icon 接口的实现，它根据 Image 绘制 Icon...
Vue实现点击显示不同图片的效果
12-11
本文实例为大家分享了Vue点击显示不同图片的具体代码，供大家参考，具体内容如 使用Vue中的以下知识点来显示效果 ①：v-for：循环遍历数据 ②：v-bind:class={ }：绑定样式 ③：v-on:click（简写@click）：点击事件 ④：v-if：判断 <!DOCTYPE html> <html> <head> <title>点击显示相对应的图片</title> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; } .myul{ display: flex; } .myu
按钮点击与弹出时显示不同的图片
limiaoaichendihai的博客
12-23 910
在开发中，我们经常会遇到控件点击时变色问题，比如说：Button、ImageView、ImageButton等， 我们就用 selector资源进行处理。代码：selector_btn.xml                  通过控件属性 ： background的引用这个 selector_btn.xml文件使其变色。 TextView点击变
jQuery分页按钮控制动态加载图片列表代码.zip
07-11
这里我们讨论的“jQuery分页按钮控制动态加载图片列表代码”是一个使用JavaScript库jQuery实现的分页功能，特别适用于显示大量图片列表的情况。通过这个代码，用户可以逐页浏览图片，减少一次性加载所有图片对网络...
可以动态加载本地PNG图片按钮实例
05-16
这可以通过响应用户的操作，如点击按钮、选择文件等事件来实现。当触发这些事件时，读取新的PNG文件路径并更新按钮的图像。 6. **内存管理**： 记得在不再需要图片时释放资源，使用`Image::Dispose`方法释放图片...
加载路径图片的动态按钮.rar_VC 按钮_VC 图片_图片 按钮_按钮_按钮 图
最新发布
09-21
本文将详细讲解如何实现这样一个功能：在VC++中创建一个动态加载用户指定图片的按钮，而非固定使用资源图片。 首先，我们需要理解按钮控件的基本概念。在VC++中，按钮（CButton）是MFC（Microsoft Foundation ...
jQuery点击加载更多按钮加载图片效果
10-25
"jQuery点击加载更多按钮加载图片效果"是一个常见的网页交互功能，主要用于优化页面性能和提升用户体验。这种技术允许用户按需加载图片，而不是一次性加载所有图片，从而减少页面初次加载时的数据量，加快页面渲染...
[flash] 多图动态载入
weixin_30830327的博客
08-24 71
来自:http://www.healdream.com/blog/article.asp?id=150查看效果： Flash动画 在线播放 更新了源文件，希望能给大家带来帮助：）本以为网上这样的教程多的是，随便一抓就是一大把，结果不甚理想，不过也看到了一些有用的文章。还是自己动手丰衣足食吧，我们知道MovieClipLoader载入单图，还是比较简单的，但如果是多图呢，如何建立监听？如...
js只显示一个(按钮或图片)，点击替换新的
12-29
js只显示一个(按钮或图片)，点击隐藏旧的替换新的
点击加载更多图片与内容
03-11
一个基于jquery库的点击加载更多实现（可在一个页面实现多个）。 真实的案例。 当初进行项目的时候没有找到合适的代码（找到的很多都是滚动条拖到底自动出现，没有点击出现的），并且要实现一个页面多个点击加载，所以动手写了一个，实现方法简单，调试方便，基于真实项目的实现设计，直接就可以用。 方便大家使用。
点击button按钮切换一个图片
11-19
能够实现点击按钮切换图片功能、代码简明、步骤清楚
cocoStudio:Button三种状态需要对应不同的图片
思考的智慧，知识源于思考
06-08 3254
1、在cocoStudio工具中，可以直接在Button中放一张图片，这样就成为 了一个带文字的按钮。 2、 但是有时候，有些按钮需要正常状态，选中状态，禁止状态在不同状态下，需要 显示不同的文字图片，我们可以在点击后通过获取按钮上的ImageView控件， 然后调用ImageView::loadTexture方法，改变文字图片，但是这样感觉很不方便， 其实Button的三种状态，内部
向下滚动页面加载图片的js
weixin_34384557的博客
06-24 355
js代码scroll.photo.js : window.imgscroll = { options: { target: null, //插入图片的目标位置 img_list: null, //图片数组 [{ url: "/CMF01_000.jpg"},{ url: "/CMF01_001.jpg"}] img_max: ...
“按需加载”的应用
canglingyue的专栏
06-13 476
按需加载是前端性能优化中的一项重要措施，按需加载是如何定义的呢？顾名思义，指的是当用户触发了动作时才加载对应的功能。触发的动作，是要看具体的业务场景而言，包括但不限于以下几个情况：鼠标点击、输入文字、拉动滚动条，鼠标移动、窗口大小更改等。加载的文件，可以是JS、图片、CSS、HTML等。后面将会详细介绍“按需”的理解。 按需解析HTML 按需解析HTML，就是页面一开始不解析HTML，
HTML、CSS糖果颜色按钮动画
qq_52899829的博客
11-26 824
HTML代码： <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/new_file.css"/> </head> <body> <header> <link href="https://fonts.googleapis.com/css.
button按钮样式_用纯CSS做简单的动态按钮，一步一步超简单【212】
weixin_39934257的博客
11-22 973
这是一个简单的，带有动态效果的按钮，纯CSS做。图1一、我们先做一个按钮。图2图3二、按钮很丑，我们修改一下吧，加个样式，这样就好看很多了。图4图5三、按钮好看了，我们加个简单的动态吧，就是当鼠标在按钮上面时，button这个词向左移一些。图6图7四、如图7有动态了，但这个动态太生硬，我们让这个span的动态过渡持续0.5秒，再看一下效果。图8图9五、图7和图9对比再明显不过了，接下来我们在spa...
html按钮动态效果,8款超酷而实用的CSS3按钮动画
weixin_31600439的博客
06-03 3281
本文作者html5tricks，转载请注明出处很久没有向大家分享关于1、CSS3分享按钮动画特效这是一款基于CSS3的社会化分享按钮，按钮非常简单，提供了分享到twitter、facebook、youtube等大型社交网站。每一个分享按钮都有个大社交网站的Logo图标，并且在鼠标滑过这些按钮时，利用CSS3的动画特性出现滑动的动画效果。2、这次要分享一个非常具有动画色彩的CSS3按钮，按钮的外观比...
iOS按钮点击异步加载图片方法汇总
在iOS开发中，异步加载图片是一个常见的需求，特别是在用户界面设计时，为了提升用户体验，避免阻塞主线程导致界面卡顿。本文将详细介绍几种在iOS中实现异步加载图片的方法，这些方法包括一个较为基础但实用的实现，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值