html中的上一个/下一个按钮？

Posted 2023-02-25

【中文标题】html中的上一个/下一个按钮？

【英文标题】：Previous / Next buttons in html?

【发布时间】：2012-11-13 16:45:32

【问题描述】：

我想在我的网站上为“新闻”部分创建导航，当单击按钮时，它会将用户导航到下一个或上一个 html。

按钮必须在 html 名称的末尾添加或删除一个数字，因此如果第一个 html 是 news.html 并且单击下一个按钮，它应该转到 news1.html 等。

我想这可以用javascript来实现，我该如何开始？

【问题讨论】：

我们可以看到您现在拥有的页面吗？我们需要做更多的工作才能为您提供一点帮助。

是的，这里是：metallica-gr.net 第一个页面现在包含大约 12 篇新闻文章，它是一个名为 News.html 的外部 html，在主体中加载。

【参考方案1】：

var path = window.location.pathname;

然后使用正则表达式解析path，获取当前页数（如果有）并将其转换为数字，增加/减少并从中创建您的网址。

但是，我认为您使用的不是 ajax，而是某种服务器端语言，最好在服务器端使用。

我们无法为您完成作业。这是测试接受日期字符串的正则表达式的示例：

            // Date validation
        if (bdate != "")
        
             if(!/^[0-9]1,2\.[0-9]1,2\.[0-9]4(\.)?$/.test(bdate)||
             String(new Date(bdate.split(".")[1] + "/" + bdate.split(".")[0] + "/" + bdate.split(".")[2])) == "Invalid Date")        
            return "Please enter a valid date in format dd.mm.yyyy"
        

在那里，正则表达式测试是这个表达式：/^[0-9]1,2\.[0-9]1,2\.[0-9]4(\.)?$/.test(bdate)，它测试字符串bdate是否符合正则表达式。 正则表达式是您可以通过将运算符放在上面的两个正斜杠之间来构造的对象 (/operators/)。

this is a reference for javascript regex 蚂蚁这是一个tutorial。 祝你好运:)

顺便说一句，如果你不想学习任何东西，你可能应该考虑使用 wordpress 甚至 tumblr 之类的东西。

【讨论】：

你们能给我举个例子吗？我对正则表达式一无所知。我的网站只使用 html。

我不是要你做功课，我觉得比你们给我的例子要容易。例如，在我更熟悉的 ActionScript 中，您可能会创建一个 for 循环并将 +1 添加到 news.html 的 href。我们不能在javascript中使用类似的方法吗？

@zefs：你要循环什么？ Javascript 将在每个单独的页面中运行客户端 in，因此您必须从当前页面的上下文中工作，然后确定下一页是什么，前一页是什么。当然，如果您可以在服务器端工作，那么这将成为一个更容易处理的问题。

对，我没想到。我想这个循环可能只适用于 iframe 之类的东西。

没错。循环什么？将只有一个“下一个”和一个“上一个”。 iframe 对这个问题真的没有任何接触点。

【参考方案2】：

您可以使用window.location 获取当前页面，将其与正则表达式匹配以获取末尾的数字（如果存在），然后将其递增以获取下一页并为上一页递减它.当然，您必须弄清楚如何处理第一页和最后一页。

例如，这样的事情可能会起作用：

var regex = /news(\d*)\.html/;
var index = +regex.exec(window.location.pathname)[1];

现在您的索引将是空白（news.html）或数字。然后，您可以使用该数字来形成您需要的下一个和上一个按钮的网址。

var nextUrl = "news" + (index+1) + ".html";
var prevUrl = "news" + (index-1) + ".html";

编辑：这不是最好的方法，但这里有一个fiddle 让你开始。

【讨论】：

你能做一个有效的例子吗？（会很棒）我不确定如何将变量与按钮链接起来。第一个新闻html页面的链接是metallica-gr.net/news/news.html

所以，马特我尝试了你的代码并检查了小提琴，但它对我不起作用。这些链接无法让您到达任何地方（我也尝试放置 void hrefs）。有什么想法吗？

我似乎无法正确获取 url，虽然我让按钮工作，但我在下一个 html 的路径上做错了。