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

我尝试了一些标签脚本，但我想我正在寻找更具体的东西

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

类似的东西

但我希望能够使用按钮以外的东西。我将有一个设置图像像画廊一样水平排列。当单击一个图像时，另一个DIV标签中的一些内容显示在它的正上方。单击另一个图像时，显示的图像将隐藏，而另一个图像将显示。几乎和JSFIDLE演示中的操作完全一样

但是，我希望能够使用某种类型的div id/类将图像与内容连接起来。。。所以

此处为相关内容，此处为图像

或者类似的事情

满足于此

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

同样，我想要的内容是显示在链接或图片上方的内容

所以它看起来像这样

Dynamic Content Displayed Image1 Image2 Image3 Image4 Image5 动态内容显示 图像1图像2图像3图像4图像5 此动态内容将根据单击的图像进行切换

如果有人能帮忙，那就太好了

$(".contet").each( function() {
  $(this).hide();
});
$(".tab").on("click", function() {
  var s = $(this).attr("id");
  var g = $("#"+s+".contet").html();
  $(".content").html(g);
});

$（函数（）{
$（“#制表符”）.tabs（）；
});





图1

图2

图3

图4

图5

在学习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>

为类似的项目添加类也是选择器的一大帮助

演示：

API参考：

---

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

您可以使用任何元素替换按钮，只需要具有相同的ID。如果ID最初不同，我将如何执行此操作。这就是我感到困惑的原因。用任何元素替换按钮，但是分配它们现在拥有的id，每个按钮都有不同的id。id不应该与div中的id匹配吗？我不太明白为什么ID不同。我尝试过这段代码，但它对我无效：（按钮是控件。div是显示/隐藏的。js中的第一个函数意味着"单击id=w，隐藏id b，c，d，显示id a。对于每个按钮，都有一个函数告诉它在单击时要做什么，在这种情况下，显示或隐藏哪个div。这并不是我想要的。同样，我希望内容在顶部。正如你可以从我的原始帖子中看到的，动态内容显示和图像示例。我正在寻找一个ext请记住简单的脚本，类似于我用JSFIDLE提供的东西。我不想添加其他插件或源代码之类的东西。现在看看我的答案！并接受它！这看起来更好，但我很难在我的页面上使用它。元素在那里是不可访问的。另外，我如何让所有内容在页面上都不可见启动，并且只有第一个可见。“第一个可见”我已经在fiddle中完成了。从那里复制代码。还有，你得到了什么错误？你不必更改类名和ID！否则，如果你想，请在你的问题中添加HTML代码。我需要单击图像以显示内容。而不是相反。我也会用同样的方法，+1我在这里尝试了这段代码，但单击按钮不会显示任何内容。我将其放入循环中，

只返回一个数字。

$（'#按钮"换行输入'）。单击（函数（）{$（'#内容'）.children（）.hide（）.eq（$（this.index（））.show（））

这是它的HTML部分。请确保将所有jquery包装在

文档中。就绪

。jsFIDLE会自动执行此操作。我使用

就绪

包装更新了答案阅读此内容以更好地理解原因：我尝试了以下

$（文档）。就绪（函数（）{$（'#按钮_wrapinput'）。单击（函数（）{$（“#content”）.children（）.hide（）.eq（$（this.index（））.show（）}；

<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>

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