Question

我读过无数关于用其他内容替换<div>的文章，更具体地说是另一个PHP文件。我似乎无法让这个工作。当我点击任一按钮时绝对没有任何反应。我试图确保所有id =“XXX”对于所有人和JavaScript函数都是正确的，但我是Javascript的新手。我已经包含了下面的代码，并链接到我尝试将其放入的页面和测试页面。

原始页面 - http://www.havenswatch.com/records/player.php?playerID=1

测试页 - http://www.havenswatch.com/records/testdivswap.php

<html>
    <head>
        <script>
            function loadbioPage() {
                $("#rightpage").load('bio.php');
            }
            function loadcreditsPage(){
                $("#rightpage").load('creditsmod.php');
            }
        </script>    
    </head>
    <body>
        <input type="button" value="Bio" onclick="loadbioPage()"/>
        <input type="button" value="Credits" onclick="loadcreditsPage()"/>
        <div id="rightpage">
            <?php include('creditsmod.php'); ?>
        </div>
    </body>
</html>

Answer 1

包含jQuery并使用正确的事件处理程序，如果您需要有关在PHP脚本中输出正确数据的帮助，请向我们展示脚本并提出问题：

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#loadbioPage').on('click', function() {
                $("#rightpage").load('bio.php');
            });

            $('#loadcreditsPage').on('click', function() {
                $("#rightpage").load('creditsmod.php');
            });
        });
    </script>    
</head>
<body>
     <input type="button" value="Bio" id="loadbioPage"/>
     <input type="button" value="Credits" id="loadcreditsPage"/>
     <div id="rightpage">
         <?php include('creditsmod.php'); ?>
     </div>
</body>
</html>

Answer 2

那么你使用jquery方法，但我看不到头部中提到的jquery。你也应该首先清除div下面的一个示例脚本，下面是我要做的事情。

<html>
<head>

//reference jquery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>                                          
<script type="text/javascript">

//make sure the document is ready for changes
$(document).ready(function(){

//listen for btn 1 to be clicked
$('#btn1').click(function(){
$('#rightpage').html(""); //clear html inside the div so new content can replace it
$('#rightpage').load('creditsmod.php'); //load new data
});

//listen for btn 2 to be clicked    
$('#btn2').click(function(){
$('#rightpage').html(""); //clear html inside the div so new content can replace it
$('#rightpage').load('bio.php'); //load new data
});

})
</script>
</head>
<body>
<button id="btn1">CreditsMod</button> //great html5 option compared to input for buttons.
<button id="btn2">Bio</button>
<div id="rightpage"><?php include('creditsmod.php'); ?></div>
</body>
</html>

Answer 3

首先，Firebug控制台在标签中显示错误。

尝试以下代码

  <html>
 <head>

  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
 <script type="text/javascript">
 function loadbioPage(){
   $("#rightpage").load('bio.php');
}
 function loadcreditsPage(){
 $("#rightpage").load('creditsmod.php');
}
</script>    
</head>
<body>
 <input type="button" value="Bio" onclick="javascript:loadbioPage(); return false;"/>
 <input type="button" value="Credits" onclick="javascript:loadcreditsPage(); return false;"/>
 <div id="rightpage">
     <?php include('creditsmod.php'); ?>
 </div>

其余的代码似乎很好。

请检查。

谢谢

Answer 4

<script>
<script>
function loadbioPage(){
$("#rightpage").load('bio.php');
}
function loadcreditsPage(){
$("#rightpage").load('creditsmod.php');
}
</script>

//请检查代码中脚本标记的开头并安装jQuery最新版本。

将另一个PHP重新加载到DIV中

4 个答案: