我已经阅读了很多过去的帖子,但我不太明白如何针对我的特定问题执行此操作。
我的网站左侧有一张图片,其中有两个选项,Cow 和 Pig。我计划使用页面的这一部分的方式是作为一种 slider 。我希望用户能够点击此图像并根据需要多次从“牛”旋转到“ pig ”以及从“ pig ”旋转到“牛”。
这个选择决定了在页面右侧的另一个 div 中使用什么背景图像。因此,在单击左侧的图像后,我想将显示属性从使 Cow 可见变为使 Pig 可见(并将 display:none 属性从 Pig 切换为 Cow)。
如有任何帮助,我们将不胜感激。我看过http://jsfiddle.net/NjTea/5/但它并不能完全帮助我。
<div id="slider">
<div class="homesplashslider">
<div class="homesplashslider2">
#slider {
float: left;
.homesplashslider {
float: left;
margin-left: 15px;
background: url('../images/slider.png');
margin-top: 20px;
width: 123px;
height: 64px;
.homesplashslider2 {
float: left;
margin-left: 15px;
background: url('../images/slider2.png');
margin-top: 20px;
width: 123px;
height: 64px;
display: none;
<div id="cowandpig">
<img class="cowtoggle" src="assets/images/cow.png">
<img class="pigtoggle" src="assets/images/pig.png">
</div>
.cowtoggle {
float: right;
.pigtoggle {
float: right;
display: none;
最佳答案
尝试在每个图像上添加一个点击事件,以隐藏和显示您需要显示的图像。试试这个:
$(document).ready(function() {
var $slider1 = $('.homesplashslider');
var $slider2 = $('.homesplashslider2');
$('.cowtoggle').click(function() {
$slider1.show();
$slider2.hide();
});
$('.pigtoggle').click(function() {
$slider2.show();
$slider1.hide();
});
});
关于javascript - 从显示 :none to visible on click 切换类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29080483/