0

我已经阅读了无数关于用<div>其他内容替换 a 的文章，更具体地说是另一个 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>
4

4 回答 4

2

包括 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>
于 2013-05-21T16:28:28.850 回答
1

好吧，您使用 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>
于 2013-05-21T16:54:40.907 回答
0

首先，Firebug consol 在标签中显示错误。

试试下面的代码

  <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>

其余的代码似乎很好。

请检查一下。

谢谢

于 2013-05-21T16:37:52.790 回答
-1 
<script>
<script>
function loadbioPage(){
$("#rightpage").load('bio.php');
}
function loadcreditsPage(){
$("#rightpage").load('creditsmod.php');
}
</script>

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

于 2013-05-21T16:31:20.520 回答