Javascript 页面重定向并将文件加载到div_Javascript_Jquery

Javascript 页面重定向并将文件加载到div

javascript jquery

Javascript 页面重定向并将文件加载到div,javascript,jquery,Javascript,Jquery,我有index.php，当用户单击按钮“Click”时，我希望它重定向到“newpage.php”，但也希望另一个页面“Click.php”加载到新加载的“newpage.php”中的div“content”中。类似地，我希望在单击“Click Alway”时，将用户重定向到同一页面“newpage.php”，但将另一页面“ClickAlway.php”加载到同一div“content”中 index.php <html> <head> <

我有index.php，当用户单击按钮“Click”时，我希望它重定向到“newpage.php”，但也希望另一个页面“Click.php”加载到新加载的“newpage.php”中的div“content”中。类似地，我希望在单击“Click Alway”时，将用户重定向到同一页面“newpage.php”，但将另一页面“ClickAlway.php”加载到同一div“content”中

index.php

<html>  
    <head>
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script type="text/javascript">
        $(document).ready(function() {
          $(document).on('click', '.clickme', function() {
            window.location.replace("newpage.php");
          });

          $(document).on('click', '.clickmealso', function() {
            window.location.replace("newpage.php");
          });
        });
      </script>
    </head>

    <body>
      <div>
        <button class="clickme">Click</button>
        <button class="clickmealso">Click Also</button>
      </div>
    </body>    
</html>

<html>    
    <head>
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script type="text/javascript">
        $(document).ready(function() {});
      </script>
    </head>

    <body>
      <div id="content">
      </div>
    </body>    
</html>


$（文档）.ready（函数（）{
$（文档）.on（'click'，'clickme'，函数（）{
window.location.replace（“newpage.php”）；
});
$（文档）。在（'click'，'clickmealso'，函数（）上{
window.location.replace（“newpage.php”）；
});
});
点击
也点击

newpage.php

<html>  
    <head>
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script type="text/javascript">
        $(document).ready(function() {
          $(document).on('click', '.clickme', function() {
            window.location.replace("newpage.php");
          });

          $(document).on('click', '.clickmealso', function() {
            window.location.replace("newpage.php");
          });
        });
      </script>
    </head>

    <body>
      <div>
        <button class="clickme">Click</button>
        <button class="clickmealso">Click Also</button>
      </div>
    </body>    
</html>

<html>    
    <head>
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script type="text/javascript">
        $(document).ready(function() {});
      </script>
    </head>

    <body>
      <div id="content">
      </div>
    </body>    
</html>


$（文档）.ready（函数（）{}）；

尝试以下解决方案：

index.php

使用url参数将document ready事件更改为重定向到newpage.php。对于这个示例，我使用了一个名为“page”的参数

$(document).ready(function() {
    $(document).on('click', '.clickme', function() {
      window.location = ("newpage.php?page=click");
    });

    $(document).on('click', '.clickmealso', function() {
      window.location = ("newpage.php?page=clickAlso");
    });
});

newpage.php

<html>  
    <head>
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script type="text/javascript">
        $(document).ready(function() {
          $(document).on('click', '.clickme', function() {
            window.location.replace("newpage.php");
          });

          $(document).on('click', '.clickmealso', function() {
            window.location.replace("newpage.php");
          });
        });
      </script>
    </head>

    <body>
      <div>
        <button class="clickme">Click</button>
        <button class="clickmealso">Click Also</button>
      </div>
    </body>    
</html>

<html>    
    <head>
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script type="text/javascript">
        $(document).ready(function() {});
      </script>
    </head>

    <body>
      <div id="content">
      </div>
    </body>    
</html>

定义访问页面后发生的情况。这就是事情变得更有趣的地方。每次加载此页面（newpage.php）时，它都会在URL中查找参数“page”，并提取其值。然后将参数的值分配给一个名为

$pagetGet

的变量
之后，我们检查该值是否等于

'click'

或

'clickalc'

，并使用

require

相应地显示内容

<?php 
  $pageToGet = $_GET['page'];
?>
<html>    
    <head>
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    </head>

    <body>
      <div id="content">
        <?php 
            if ($pageToGet == 'click') {
                require('Click.php');
            } elseif($pageToGet == 'clickAlso') {
                require('ClickAlso.php');
            }
        ?>
      </div>
    </body>    
</html>

确保您的文件：Click.php和clickalash.php位于同一目录中，以使其正常工作

祝你好运

使用url参数根据这些url参数区分版本和php包含。在

标签中使用href会比在普通站点中使用href更简单navigation@charlietfl抱歉，但是你能详细说明你的建议吗？使用链接而不是按钮和javascript来导航。使用url参数（可在web上轻松搜索）将内容区分为display@charlietfl谢谢，但我的困难是当加载新页面时，似乎没有更新content div的方法，因为单击按钮时执行的唯一操作是加载页面。我不知道如何通过使用链接或添加url参数来解决这个问题。url参数将决定哪些内容……您可以使用服务器端包含或ajax来设置内容