不刷新页面内容的导航栏

Question

我在页面上有以下 link 结构（导航栏）：

<table border="0">
  <tr>
    <td><?php if ($pageNum_get_thumbs > 0) { // Show if not first page ?>
        <a href="<?php printf("%s?pageNum_get_thumbs=%d%s", $currentPage, 0, 
    $queryString_get_thumbs); ?>"><img src="First.gif" /></a>
        <?php } // Show if not first page ?></td>
     <td><?php if ($pageNum_get_thumbs > 0) { // Show if not first page ?>
        <a href="<?php printf("%s?pageNum_get_thumbs=%d%s", $currentPage, 
     max(0, $pageNum_get_thumbs - 1), $queryString_get_thumbs); ?>"><img 
    src="Previous.gif" /></a>
        <?php } // Show if not first page ?></td>
    <td><?php if ($pageNum_get_thumbs < $totalPages_get_thumbs) { // Show if 
     not last page ?>
        <a class="nav_link" href="<?php printf("%s?pageNum_get_thumbs=%d%s", 
   $currentPage, min($totalPages_get_thumbs, $pageNum_get_thumbs + 1), 
   $queryString_get_thumbs); ?>"><img src="Next.gif" /></a>
        <?php } // Show if not last page ?></td>
    <td><?php if ($pageNum_get_thumbs < $totalPages_get_thumbs) { // Show if 
   not last page ?>
        <a href="<?php printf("%s?pageNum_get_thumbs=%d%s", $currentPage, 
        $totalPages_get_thumbs, $queryString_get_thumbs); ?>"><img 
     src="Last.gif" /></a>
        <?php } // Show if not last page ?></td>
  </tr>
</table>

有没有什么方法可以在不刷新整个页面的情况下单击任何 link？这是它在页面上的样子：

我已经尝试了 Ajax（onclick GET 方法）和来自各个站点的其他建议，但我没有运气。

Answer 1

将点击事件绑定到link并在href中传递javascript:void(0)。如下图，这将停止页面刷新。

<a href="javascript:void(0)" onclick="yourFunction(params)"><img src="First.gif" /></a>

并在代码中创建您的函数（参数）。

javascript:void(0) 将停止页面刷新。 单击 link 后将触发 onclick，您可以在那里编写剩余的逻辑.

您可以像下面这样写 link。

<a href="javascript:void(0)" onclick="yourFunction(<?php printf("%s?pageNum_get_thumbs=%d%s", $currentPage, 0, 
    $queryString_get_thumbs); )"><img src="First.gif" /></a>

功能如下。

function yourFunction(params){

window.location.href = params;// or any other logic as per your requiriement;
}

Answer 2

这是有效的：

我添加了一个名为 params 的变量：

$params = explode("&", $_SERVER['QUERY_STRING']);

然后将 link 更改为：

<a onclick="next_slide('<?php printf("%s?pageNum_get_thumbs=%d%s", 
$currentPage, min($totalPages_get_thumbs, $pageNum_get_thumbs + 1), 
$queryString_get_thumbs); ?>')" href="#">Next</a>

然后我添加了 Jquery 脚本：

<script type="text/javascript">
function next_slide(params) {
  $('#container').load('<?php printf("%s?pageNum_get_thumbs=%d%s", 
 $currentPage, min($totalPages_get_thumbs, $pageNum_get_thumbs + 1), 
 $queryString_get_thumbs); ?>');

}

</script>

所有图像都位于容器 DIV 中，一次重复三个。

瞧！有用！希望这可以帮助将来的人并防止他们的头撞到 $devrocks

不刷新页面内容的导航栏

Navigation Bar without Refreshing page content

navigation

jquery

reload