jquery - 使用 jQuery 创建选项卡但在顶部显示内容

Question

我已经尝试了一些选项卡脚本，但我想我正在寻找更具体的东西。

基本上，我想要显示一个 div 并像标签一样隐藏所有其他内容的东西。

与此非常相似

http://jsfiddle.net/6UcDR/2/

但我希望能够使用按钮以外的东西。我将设置像画廊一样水平排列的图像。单击一张图片时，另一个 div 标签中的一些内容会显示在它上方的正中间。单击另一张图片时，显示的图片将隐藏，而另一张将显示。几乎完全像在那个 jsfiddle 演示中所做的那样。

但是，我希望能够使用某种类型的 div ID/类将图像与内容联系起来......所以

<div id="blahblah"> Related Content Here </div><div id="blahblah"> Image Here </div>

或者类似的东西

<div id="content123" class="tab_content" style="display: block;"> content here <li class="active"><a href="#content123" rel="episodelist">Episode List</a></li>

这会让我很容易地进入一个 php 循环，在其中我可以通过使用图像 ID 等提取多个图像及其内容。

同样，我想要显示在我将拥有的链接或图像上方的内容。

所以它看起来像这样......

            Dynamic Content Displayed

Image1     Image2     Image3    Image4    Image5

此动态内容会根据单击的图像进行切换。

如果有人能提供帮助，那就太好了!

Answer 1

在学习 jQuery 时，很容易将注意力集中在需要为所有内容提供 ID，因为 ID 选择器非常具体。当面对每组 ID 的多个场景时，使用 ID 进行编码可能会变得复杂。然而，有许多方法可以使用其他方法来匹配不同的元素，这些方法可以大大简化代码而无需使用任何 ID。

例如，在演示中围绕按钮和内容项添加包装器，可以使用 index() 方法编写代码:

HTML:

<div id="content">
  <div id=a style="display:none">1</diV>
  <div id=b style="display:none">2</diV>
  <div id=c style="display:none">3</diV>
  <div id=d style="display:none">4</diV>
</div>
<div id="button_wrap">
  <input type=button value=1 id=w/>
  <input type=button value=2 id=x/>
  <input type=button value=3 id=y/>
  <input type=button value=4 id=z/>
</div>

JS:

$(function(){
    $('#button_wrap input').click(function(){
      /* hide all content, show item that  matches index of this button*/
      $('#content').children().hide().eq( $(this).index() ).show()
    });
});

给相似的item加class也是选择器的一大 helper

演示:http://jsfiddle.net/6UcDR/38/

API 引用:

http://api.jquery.com/index/

http://api.jquery.com/eq/

花一些时间浏览 API 中的各种遍历方法和示例。了解各种遍历的作用将帮助您生成更多动态布局和用户界面