0

我是 jQuery 的新手。在下面的代码中，我正在尝试为每个子标题进行分页，如果我单击子标题 1，页面应该只显示子标题 1 的内容。我已经尝试并获得了必须的页数创建并获取索引。

我怎样才能创建分页？就像在下面的情况下，我希望显示“1,2,3”，因为有三个子标题。在点击 1 时，我应该只显示子标题 1，其他的应该被隐藏。如何使用 jQuery 来完成？

<span>Click a Header!</span>
<div><h2>Sub Header 1</h2></div><div>Content 1</div>
<div><h2>Sub Header 2</h2></div><div>Content 2</div>
<div><h2>Sub Header 3</h2></div><div>Content 3</div>

$("h2").click(function () {
    // this is the dom element clicked
    var index = $("h2").index(this);
    var size = $("h2").size(this);
    $("span").text("That was Header index #" + index + "   Total Pages #" + size);
});

http://jsfiddle.net/userdude/GtDHW/

4

2 回答 2

2

这似乎是您正在尝试做的事情，希望采用更有条理的方法。

如果您正在尝试分块文本（如新闻故事或诸如此类的内容），那么有一些插件可以帮助解决这个问题。你只需要做一些研究，找到适合你需要的东西。

一些例子包括：

请注意，分页也指表格数据分页，以及较小程度的列表制作。所以当你去寻找确保你是特定的时要注意，否则你可能会发现一些奇怪的结果。另请注意，服务器上会多次发生分页，尽管这不是必需的。一些“新媒体”网站确实会加载整篇文章，然后在屏幕之间切换，例如 The Daily Beast。

HTML

<div id="msg">Click a Header to Show Associated Content</div>
<div class="story">
    <h2>Sub Header 1</h2>
    <div>Content 1</div>
</div>
<div class="story">
    <h2>Sub Header 2</h2>
    <div>Content 2</div>
</div>
<div class="story">
    <h2>Sub Header 3</h2>
    <div>Content 3</div>
</div>

CSS

.story > div {
    display: none;
}

jQuery

$(document).ready(function(){
    var $headers = $(".story h2"),
        $msg = $('#msg');

    $headers.click(function(){
        var $this = $(this),
            $content = $headers.not(this).siblings('div'),
            msg = "Select story #" + $this.text();

        $content.hide();

        $this.siblings('div').show();

        $msg.text(msg);
    });
});

http://jsfiddle.net/userdude/GtDHW/1/

于 2012-06-18T11:38:41.117 回答
2

这是你想要达到的目标吗？

$("h2").click(function () {
    $("h2").not(this).parent().next().hide();
    $(this).parent().next().show();
});

解释：

  • 取所有的H2s，除了被点击的那个，去parent（DIV包含H2s），获取下一个元素（DIV有内容），隐藏所有DIV包含内容的s
  • 取 clicked H2，以类似方式遍历，确保显示DIVwith 内容
于 2012-06-18T11:50:20.913 回答