Question

我正在尝试创建一个网站，其中我在一个div（＃page2）中有多个图像（链接），当单击一个时，它关闭已经打开的div（＃page1）并打开与之相关的内容单击的图像（链接）。当单击另一个图像（链接）时，它应该关闭＃page1中的打开内容并打开相关内容。我确信这是可能的，但我不知道该怎么做。

Answer 1

HTML：

<div class="links">
  <a href="#page1"><img src=""/></a>
  <a href="#page2"><img src=""/></a>
  <a href="#page3"><img src=""/></a>
</div>
<div class="pages">
  <div id="page1"></div>
  <div id="page2"></div>
  <div id="page3"></div>
</div>

JQuery代码：

$(document).ready(function() {
  $('div.pages div').hide();
  $('div.links a').click(function() {
    $('div.pages div').slideUp();
    $($(this).attr('href')).slideDown();
    return false;
  });
});

您可以将.slideUp()替换为.fadeOut()或.hide()。 .slideDown()可以替换为.fadeIn()或.show()

Answer 2

也许您要找的是TABS或ACCORDION？

http://jqueryui.com/demos/tabs/

http://jqueryui.com/demos/accordion/

Jquery滑块有多个div

2 个答案: