使用 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 等来提取多个图像及其内容。

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

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

显示的动态内容 图片1 图片2 图片3 图片4 图片5

此动态内容会根据所点击的图片进行切换。

如果有人可以帮忙，那就太好了！

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()
    });
});

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

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

API 参考：

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

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

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

Answer 2

<script src="../../jquery-1.8.0.js"></script>
    <script src="../../ui/jquery.ui.core.js"></script>
    <script src="../../ui/jquery.ui.widget.js"></script>
    <script src="../../ui/jquery.ui.tabs.js"></script>
    <link rel="stylesheet" href="../demos.css">
    <script>
    $(function() {
        $( "#tabs" ).tabs();
    });
    </script>
<div class="demo">

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
        <p>Image1</p>
    </div>
    <div id="tabs-2">
        <p>Image2</p>
    </div>
    <div id="tabs-3">
        <p>Image3</p>
    </div>
        <div id="tabs-4">
        <p>Image4</p>
    </div>
 <div id="tabs-5">
        <p>Image5</p>
    </div>

</div>

</div>

Answer 3

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

Working Fiddle With Pure jQuery