jQuery实现点击链接显示和隐藏二维码

1.新建一个html文档，一个css文档，一个js文档

2.二维码显示之前的图片

3.二维码显示之后的图片

4.html的代码

<ul class="t-con-r f-r">
					<li><a href="#">我（个人中心）</a></li>
					<li><a href="#">我的购物车</a></li>
					<li><a href="#">我的订单</a></li>
					<li class="erweima">
						<a href="#">扫描二维码</a>
						<div class="ewm-tu" style="display: none;">
							<a href="#">
								<img src="img/erweima-tu.jpg" alt="这里显示二维码图片" title="二维码">
							</a>
						</div>
					</li>
					<div style="clear: both;"></div>
				</ul>

5.CSS代码

.f-l{
	float: left;
}
.f-r{
	float: right;
}

ul{
	list-style: none;
}

.top-con .t-con-r li{
	float: left;
	margin-left: 45px;
	line-height: 43px;
}

.top-con .t-con-r .erweima{
	position: relative;
}

.top-con .t-con-r li a{
	font-size: 14px;
	color: #000000;
}

.top-con .t-con-r li a:hover{
	color:#F09E0B;
}

.top-con .t-con-r .erweima a{
	padding-right: 25px;
	background: url(../img/erweima-bg.jpg) no-repeat 80px center;)
}

.top-con .t-con-r .erweima .ewm-tu a{
	padding: 0px;
}

.top-con .t-con-r .erweima .ewm-tu{
	width: 94px;
	height: 94px;
	padding: 10px;
	background-color: #fff;
	border: 1px solid #E5E5E5;
	overflow: hidden;
	position: absolute;
	top: 43px;
	right: 0px;
}

6.js代码

$(document).ready(function(){
	
	/* 点击显示二维码 */
	$('.erweima').click(function(event){
		$('.ewm-tu').toggle();
	});
}