我有以下代码。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slide demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<style>
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<button id="mybutton">Show/Hide Left Slide Menu</button>
<div id="toggle"></div>
<script>
$('#mybutton').click(function () {
$("#toggle").toggle("slide");
});
</script>
</body>
</html>
我想显示一张图片(image1)。当用户点击 image1 时，div 应该出现，image1 应该隐藏，image2 应该出现。当用户点击 image2 时，div 应该隐藏，image2 应该隐藏，image1 应该出现。我怎样才能做到这一点？
最佳答案
尝试使用这个
$(document).ready(function(){
$(document).on('click','#imageid',function(){
var $this= $(this);
$('#toggle').toggle('slide',function(){
//swap src of the image on toggle is completed
var imgsrc = $this.attr('src');
$this.attr('src',$this.data('othersource'));
$this.data('othersource',imgsrc);
});
});
});
关于jquery - 左侧菜单切换图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18462727/