将类从显示:无切换到单击时可见

Switching classes from display:none to visible on click

本文关键字：单击 显示      更新时间：2023-09-26

我一直在阅读很多过去的帖子，但我不太明白如何针对我的特定问题执行此操作。

我在网站的左侧有一个图像，它有两个选项，牛和猪。我计划使用页面的这一部分的方式是作为一种滑块。我希望用户能够单击此图像并从

"牛"旋转到"猪"和"猪"到"牛"多次。

此选择指示在页面右侧的另一个div 中使用的背景图像。因此，单击左侧的图像后，我想将显示属性从使牛可见到使猪可见（并将显示：none 属性从猪切换到牛）。

任何帮助将不胜感激。我见过 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();
  });
});
相关文章：