如何在img上单击，仅显示一个并隐藏其他div

Question

我正在从事项目，并且陷入了JS的困境。 在阅读文字之前，请先查看图片。 图片

我想制作一个滑块（我确实做了），现在当我单击一个圆时，我只想显示具有相同颜色的内容框，而其他的则应隐藏。

例如，当我单击.imgRed时，我只希望显示#red，而其他则显示#blue和#black display: none; 。

谢谢。

Answer 1

您可能知道应该做些什么，但对它没有信心。 您应该隐藏其他人，但您要留下来。
例如，对于红色，您应该这样做：

$('.imgRed').click(function() {
    $('#red').show();
    $('#black').hide();
    $('#blue').hide();
}

并重复其他所有步骤。

Answer 2

我尝试根据使用的图片创建一个有效的代码段：

• 圈子的一类，酒吧的一类，
• 圆圈具有data-color属性，该属性将定位单击时显示的条。

这里是：

 // When clicking a circle, use the data-colo to display the correct bar $('.circle').click(function() { $('.bar').hide(); var color = $(this).data('color'); $('#' + color).show(); }); // Trigger the click event on load: $('.imgRed').trigger('click'); 

 .circle { display: inline-block; margin: 8px 16px; border: 30px solid; border-radius: 50%; height: 0; width: 0; } .bar { display: none; margin: 8px 16px; height: 40px; width: 250px; } .imgRed { border-color: red; background-color: red; } .imgBlack { border-color: black; background-color: black; } .imgBlue { border-color: blue; background-color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="circle imgRed" data-color="red"></div> <div class="circle imgBlack" data-color="black"></div> <div class="circle imgBlue" data-color="blue"></div> <br><br> <div class="bar imgRed" id="red"></div> <div class="bar imgBlack" id="black"></div> <div class="bar imgBlue" id="blue"></div> 

希望能帮助到你。

Answer 3

$('.imgRed').click(function(){
    $('#red').show();
    $('#blue,#black').hide();
});

现在，当您单击所有具有.imgRed类的元素时，只有那些具有ID红色的元素才可见。

与其他课程相同