Question

我想以反向时间顺序创建一个网页，其中包含有关表格形式的各种版本代码的信息。样本如下所示。

Number    Release Date   End Date     Requires           Release Note   
----------------------------------------------------------------------------
3.2       12/31/2013     03/31/2014   Foo 1.0, Bar 2.1   [Link]
3.1       11/30/2013     01/31/2014   Foo 0.8, Bar 2.0   [Link]
3.0       10/15/2013     01/07/2014   Foo 0.8, Bar 2.0   [Link]
...
1.0       06/30/2013     09/15/2013   Foo 0.5, Bar 1.6   [Link]

我准备好了这个表，使用HTML和CSS创建。但是，随着版本数量的增加，此表将变得太长。我不想丢弃旧版本的信息。是否可以自动将表的一部分移动到新的HTML文件，例如配置CSS或其他方法？

这就是结果：

Number    Release Date   End Date     Requires           Release Note   
----------------------------------------------------------------------------
9.2       12/31/2016     03/31/2017   Foo 6.0, Bar 8.1   [Link]
9.1       11/30/2016     01/31/2017   Foo 5.8, Bar 7.0   [Link]
9.0       10/15/2016     01/07/2017   Foo 5.8, Bar 7.0   [Link]
...
7.0       06/30/2016     09/15/2017   Foo 5.5, Bar 6.6   [Link]

[Older releases]

[Older releases]是指向其他HTML文件的超链接。每次有新版本时，我不想手动将HTML从一个文件移动到另一个文件？

我是网页设计新手，不知道在哪里寻找这样的东西。如果HTML / CSS无法实现这一目标，我还应该阅读哪些内容才能帮助我实现这一目标？

Answer 1

结果的分页通常在服务器中完成，该服务器仅获取结果页面所需的内容并将其发送到浏览器。这样可以快速地在浏览器中保持页面加载和页面速度。

在asp.net

中查看此example

Answer 2

由于内容只是文本，并且加载它不会花费很长时间，我建议使用jQuery - 要么使用一些分页插件，要么只创建一个链接“Show all”来显示其余版本。

这意味着您将立即加载所有版本，但以块的形式显示它们。

你可以从google找到的分页插件，bxSlider很好，但我相信你不需要任何复杂的东西。

您也可以创建自己的简单“全部显示”功能。 Basicly：

HTML

[Your release table here]

<a href="#" class="show-all">Show all</a>

<div class="rest-of-the-releases" style="display:none">
    Data data data
</div>

JQUERY

$('.show-all').click(function() {
    $('.rest-of-the-releases').fadeIn();
    $(this).fadeOut();
});

结帐jsFiddle

在多个页面之间动态分隔Web内容

2 个答案: