Jquery 在网站上浏览上一篇/下一篇文章的最佳方式_Jquery_Html

Jquery 在网站上浏览上一篇/下一篇文章的最佳方式

jquery html

Jquery 在网站上浏览上一篇/下一篇文章的最佳方式,jquery,html,Jquery,Html,在一个网站上，我打算有一个文章列表 //主页 <body> <a href="/article1_name.html">article1 title</a> <a href="/article2_some_other_name.html/">article2 title</a> <a href="/article3_another_name.html/">article3 title</a> ... <

在一个网站上，我打算有一个文章列表

//主页

<body>
<a href="/article1_name.html">article1 title</a> 
<a href="/article2_some_other_name.html/">article2 title</a> 
<a href="/article3_another_name.html/">article3 title</a> 
...
<a href="/article10_yet_another_name.html/">article10 title</a> 
</body>

...

单击article 1标题并重定向到article 1页面后，我希望在每个文章页面中实现上一页/下一页导航，如下所示：

但是，我不希望在每个页面上硬编码上一个和下一个超链接。最好的方法是什么？我不确定用什么词来寻找这样的问题。分页似乎是指其他内容（主页上要显示多少篇文章），而我的问题是如何在文章列表中动态标识上一页和下一页。谢谢。

从技术上讲，您可以这样做：

var parts = window.location.href.split('/'); //Splits the url by /
var articleString = parts[parts.length - 1].split('_')[0]; //Finds last / and first string before the _
var matches = articleString.match(/\d+$/); //Gets the string form of the number
var currentArticleNum = parseInt(matches[0]); //Parses the number.

然而，这真的很麻烦，正如burriko所说，你应该做这个服务器端。

从技术上讲，你可以这样做：

var parts = window.location.href.split('/'); //Splits the url by /
var articleString = parts[parts.length - 1].split('_')[0]; //Finds last / and first string before the _
var matches = articleString.match(/\d+$/); //Gets the string form of the number
var currentArticleNum = parseInt(matches[0]); //Parses the number.

然而，这真的很麻烦，正如burriko所说，您应该在服务器端执行此操作。

您也可以尝试这种方法

需要将class=“currentArticle”添加到正在查看的当前文章中


<html>
    <head>
        <script>    

            function prevPage(){
                var currentArticle = document.getElementsByClassName("currentArticle");
                currentArticle[0].previousElementSibling.click();
            }

            function nextPage(){
                var currentArticle = document.getElementsByClassName("currentArticle");
                currentArticle[0].nextElementSibling.click();
            }           

        </script>
    </head>

<body>  
      <div onClick="prevPage()">arrow left image placeholder</div>
      <a href="/article1_name.html" >article1 title</a> 
      <a href="/article2_some_other_name.html/" class="currentArticle">article2 title</a> 
      <a href="/article3_another_name.html/">article3 title</a> 
      ...
      <a href="/article10_yet_another_name.html/">article10 title</a> 
      <div onClick="nextPage()">arrow right image placeholder</div>
</body>

</html>


函数prevPage（）{
var currentArticle=document.getElementsByCassName（“currentArticle”）；
currentArticle[0]。previousElementSibling。单击（）；
}
函数下一页（）{
var currentArticle=document.getElementsByCassName（“currentArticle”）；
currentArticle[0]。nextElementSibling。单击（）；
}           
左箭头图像占位符
...
右箭头图像占位符

您也可以尝试这种方法

需要将class=“currentArticle”添加到正在查看的当前文章中


<html>
    <head>
        <script>    

            function prevPage(){
                var currentArticle = document.getElementsByClassName("currentArticle");
                currentArticle[0].previousElementSibling.click();
            }

            function nextPage(){
                var currentArticle = document.getElementsByClassName("currentArticle");
                currentArticle[0].nextElementSibling.click();
            }           

        </script>
    </head>

<body>  
      <div onClick="prevPage()">arrow left image placeholder</div>
      <a href="/article1_name.html" >article1 title</a> 
      <a href="/article2_some_other_name.html/" class="currentArticle">article2 title</a> 
      <a href="/article3_another_name.html/">article3 title</a> 
      ...
      <a href="/article10_yet_another_name.html/">article10 title</a> 
      <div onClick="nextPage()">arrow right image placeholder</div>
</body>

</html>


函数prevPage（）{
var currentArticle=document.getElementsByCassName（“currentArticle”）；
currentArticle[0]。previousElementSibling。单击（）；
}
函数下一页（）{
var currentArticle=document.getElementsByCassName（“currentArticle”）；
currentArticle[0]。nextElementSibling。单击（）；
}           
左箭头图像占位符
...
右箭头图像占位符

将文章存储在服务器上，并让服务器使用任何后端语言为您自动插入适当的链接。您还可以通过ID唯一地标识文章，并链接到，例如，

/article/123

，并且您的服务器可以使用正确的文章进行回复。我确信这是可行的，但我更不熟悉如何让服务器自动插入链接。有适合初学者的前端解决方案吗？一个优雅的通用解决方案需要后端。（当然，如果愿意，您可以继续硬编码…）将文章存储在服务器上，并让服务器使用任何后端语言为您自动插入适当的链接。您还可以通过ID唯一地标识文章，并链接到，例如，

/article/123

，并且您的服务器可以使用正确的文章进行回复。我确信这是可行的，但我更不熟悉如何让服务器自动插入链接。有适合初学者的前端解决方案吗？一个优雅的通用解决方案需要后端。（当然，如果愿意，您可以继续硬编码…）