Question

以下是我的想法：有四张图片，点击其中一张面板会显示我想要的一些信息。当我点击另一张图像时，旧面板消失，一个新面板在同一位置打开。我试过这样的事情：

$(document).ready(function(){
  $("#img1").click(function(){
    $("#panel").show("slow");
  });
});

<div id="panel1">
<img src="images/image1">
Some text
</div>

<img id="img1" src="some image">
<img id="img2" src="some image">

...

但是这样当我点击第二张图片时，旧面板不会消失，新面板会在第一张图片下面打开。

Answer 1

使用此：

    $(document).ready(function(){
    $("#img1").click(function(){
    $(".image:visible").hide();
    $("#panel").show("slow");
  });
});

Answer 2

如果你没有命令旧面板关闭，你怎么能期望它关闭呢？

这是我要做的（未经测试）：

$(document).ready(function () {
  $('img').click(function () {
    var img = $(this);
    var panel = $('#panel');
    panel.hide();
    panel.html(img.data('info'));
    panel.show('slow');
  })
});

html部分：

<img src="img1.jpg" data-info="information for the image" />
<img src="img2.jpg" data-info="information for the image" />
<img src="img3.jpg" data-info="information for the image" />
<div id="panel"></div>

Answer 3

试试这个：

为每个.panel提供css课程panel：

<div id="panel1" class='panel'>
<div id="panel2" class='panel'>
...........

然后hide the panelid和show the corresponding panel：

$("#img1").click(function(){
   $('.panel').slideUp();
   $("#panel1").show('slow');
});

$("#img2").click(function(){
   $('.panel').slideUp();
   $("#panel2").show('slow');
});

如何制作JQuery滑块

3 个答案:

html部分：