0

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

基本上我想要一些显示 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

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

如果有人可以提供帮助，那就太好了！

4

3 回答 3

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 中的各种遍历方法和示例。了解各种遍历的作用将帮助您生成更多动态布局和用户界面

于 2013-01-06T13:30:41.577 回答
0 
$(".contet").each( function() {
  $(this).hide();
});
$(".tab").on("click", function() {
  var s = $(this).attr("id");
  var g = $("#"+s+".contet").html();
  $(".content").html(g);
});

使用纯 jQuery 工作小提琴

于 2013-01-06T12:52:17.207 回答
0 
<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>
于 2013-01-06T13:06:09.583 回答