一个点击的切换div的js或者jquery效果，如图 35
点击a时，变成图2的样子注：AB都是放flash的地方，不只是图片，效果好时，送100财富值谢谢谢谢...
点击a时，变成图2的样子
注：AB都是放flash的地方，不只是图片，
效果好时，送100财富值
谢谢谢谢 展开
注：AB都是放flash的地方，不只是图片，
效果好时，送100财富值
谢谢谢谢 展开
2个回答
展开全部
$(function(){
GoSwitch = function(a){
$(".layout").removeClass("check");
$("#"+this.rel).addClass("check");
};
});js:
div.layout { z-index:0;position:position; }
.check { z-index:1 }css:
<div class="layout" id="flash1">
<a rel="flash1" onclick="GoSwitch(this)">点我</a>
<div>flash或者随便放啥</div>
</div>
<div class="layout" id="flash2">
<a rel="flash2" onclick="GoSwitch(this)">点我</a>
<div>flash或者随便放啥</div>
</div>
html:
追问
我用你这个怎么没有效果啊。。。
追答
不好意思，我直接写的，没具体调试过，主要思路就是通过函数切换样式表来实现你的功能，如果你需要动画效果的话，就用css3.
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
借花献佛，很臃肿的代码，不过可以实现你要的功能。
<!doctype html>
<html>
<head>
<title>jQuery效果练习</title>
<style type="text/css">
.radius{border-radius: 3px;}
.hand{cursor: pointer;}
.pos_r{position: absolute;}
.out{position: relative;width:800px;margin: 200px auto;}
.simg img,.bimg img{opacity: 0.8}
.simg img:hover,.bimg img:hover{opacity: 1;}
.simg{top: -20px;left:20px;z-index: 20}
.simg img {
width: 120px;
}
.bimg img {
width: 500px;
}
</style>
</head>
<body>
<div class="out">
<div class="simg hand pos_r" id="simg"><img class="radius" src="https://gss0.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/album/w%3D1600%3Bcrop%3D0%2C0%2C1600%2C900/sign=2cd9106b5366d0167e199a2ea71bef64/d0c8a786c9177f3e720b6fab71cf3bc79f3d565c.jpg"/></div>
<div class="bimg hand pos_r" id="bimg"><img class="radius" src="https://gss0.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/album/w%3D2048/sign=407f0f5ce61190ef01fb95dffa239c16/bd3eb13533fa828b63544252fc1f4134970a5a08.jpg" /></div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$('#simg').click(function () {
if ($('#simg').hasClass('simg')) {
$('#simg').removeClass('simg');
$('#simg').addClass('bimg');
} else {
$('#simg').removeClass('bimg');
$('#simg').addClass('simg');
}
if ($('#bimg').hasClass('bimg')) {
$('#bimg').removeClass('bimg');
$('#bimg').addClass('simg');
} else {
$('#bimg').removeClass('simg');
$('#bimg').addClass('bimg');
}
});
$('#bimg').click(function () {
if ($('#simg').hasClass('simg')) {
$('#simg').removeClass('simg');
$('#simg').addClass('bimg');
} else {
$('#simg').removeClass('bimg');
$('#simg').addClass('simg');
}
if ($('#bimg').hasClass('bimg')) {
$('#bimg').removeClass('bimg');
$('#bimg').addClass('simg');
} else {
$('#bimg').removeClass('simg');
$('#bimg').addClass('bimg');
}
});
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<title>jQuery效果练习</title>
<style type="text/css">
.radius{border-radius: 3px;}
.hand{cursor: pointer;}
.pos_r{position: absolute;}
.out{position: relative;width:800px;margin: 200px auto;}
.simg img,.bimg img{opacity: 0.8}
.simg img:hover,.bimg img:hover{opacity: 1;}
.simg{top: -20px;left:20px;z-index: 20}
.simg img {
width: 120px;
}
.bimg img {
width: 500px;
}
</style>
</head>
<body>
<div class="out">
<div class="simg hand pos_r" id="simg"><img class="radius" src="https://gss0.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/album/w%3D1600%3Bcrop%3D0%2C0%2C1600%2C900/sign=2cd9106b5366d0167e199a2ea71bef64/d0c8a786c9177f3e720b6fab71cf3bc79f3d565c.jpg"/></div>
<div class="bimg hand pos_r" id="bimg"><img class="radius" src="https://gss0.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/album/w%3D2048/sign=407f0f5ce61190ef01fb95dffa239c16/bd3eb13533fa828b63544252fc1f4134970a5a08.jpg" /></div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$('#simg').click(function () {
if ($('#simg').hasClass('simg')) {
$('#simg').removeClass('simg');
$('#simg').addClass('bimg');
} else {
$('#simg').removeClass('bimg');
$('#simg').addClass('simg');
}
if ($('#bimg').hasClass('bimg')) {
$('#bimg').removeClass('bimg');
$('#bimg').addClass('simg');
} else {
$('#bimg').removeClass('simg');
$('#bimg').addClass('bimg');
}
});
$('#bimg').click(function () {
if ($('#simg').hasClass('simg')) {
$('#simg').removeClass('simg');
$('#simg').addClass('bimg');
} else {
$('#simg').removeClass('bimg');
$('#simg').addClass('simg');
}
if ($('#bimg').hasClass('bimg')) {
$('#bimg').removeClass('bimg');
$('#bimg').addClass('simg');
} else {
$('#bimg').removeClass('simg');
$('#bimg').addClass('bimg');
}
});
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
