Question

我一直在阅读很多过去的帖子，但我不太明白如何针对我的特定问题这样做。

我的网站左侧有一个图片，有两个选项，牛和猪。我计划使用页面的这一部分的方式是一种滑块。我希望用户能够点击此图像并从＆＃34; Cow＆＃34;到＆＃34;猪＆＃34;和＆＃34;猪＆＃34;到＆＃34;牛＆＃34;他们想要多次。

此选项指示在页面右侧的另一个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;

Answer 1

尝试在隐藏的每个图像上添加点击事件，并显示您需要显示的图像。试试这个：

$(document).ready(function() {
  var $slider1 = $('.homesplashslider');
  var $slider2 = $('.homesplashslider2');
  $('.cowtoggle').click(function() {
    $slider1.show();
    $slider2.hide();
  });
  $('.pigtoggle').click(function() {
    $slider2.show();
    $slider1.hide();
  });
});

将类从display：none切换为可见的单击

1 个答案: