Question

我是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/

Answer 1

这似乎是你想要做的事情，希望以更有条理的方式。

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

一些例子包括：

注意，分页也指table data pagination和lesser degree listmaking。所以当你想要确定你是特定的时候要注意，否则你可能会发现一些奇怪的结果。还要注意，很多时候在服务器上发生分页，尽管这不是必需的。一些“新媒体”网站会加载整篇文章，然后在屏幕之间切换，即每日野兽。

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

Answer 2

这是你想要实现的目标吗？

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

说明：

除了点击的H2之外，转到包含DIV s的父（H2），获取包含内容的下一个元素（DIV），隐藏所有包含内容的DIV
点击H2，以类似的方式进行遍历，确保显示包含内容的DIV

使用JQuery分页HTML内容

2 个答案: