Question

我创建了两个简单的页面作为测试。第一个是PIG_TEST.htm，输出一个包含3个<DIV>部分的简单页面;标题，菜单和主要。 “菜单”部分包含一个链接，当选择该链接时，应通过jquery点击功能在主页面上将第二页PIG_TEST_1-php加载到ID为＆＃39; mainx＆＃39;的<DIV>。但是，选择它时只会替换原始页面。似乎它没有找到或看到＆＃34; mainx＆＃34;格。

<!DOCTYPE html>
<html lang='en'><head>
</head>
<body style='background-color:#eeeecc'>
  <div style='background-color:#6495ed; height: 110px;'>
    <div class='col-md-12 text-center'>Header TEST PAGE
    </div>
  </div>
  <div style='background-color:#ffaaaa; height: 150px;'>
    <div class='col-md-12 text-center'>Menu TEST PAGE
      <ul>
        <li><a href='PIG_TEST_1.php' id='but1'>Item 1</a></li>
      </ul>
    </div>
  </div>
  <div id='mainx' style='background-color:#cccccc; height: 300px;'>
    Main TEST PAGE
  </div>
<script type='text/javascript' charset='utf-8'>
(document).ready(function(){
  $('#but1').click(function(e){
    e.preventDefault();
    $('#mainx').load(this.href);
   });
});
</script>
<script src='js/jquery-1.8.0.min.js'></script>
</body></html>

PIG_TEST_1.php是：

<?php
echo "<body>";
echo "    THIS IS A DUMMY PAGE <br></p>";
echo "</body>";
?>

我已经尝试过拨打＆＃34; jquery-1.8.0.min.js＆＃34;就在<body>之后，但它失败了。对不起，我是jquery的新手，我们将不胜感激。

Answer 1

您应该将jquery <script>标记移到另一个标记之外（嵌套），并且在$之前还需要(document).ready符号：

<script src='js/jquery-1.8.0.min.js'></script>
<script type='text/javascript' charset='utf-8'>
$(document).ready(function(){
  $('#but1').click(function(e){
    e.preventDefault();
    $('#mainx').load(this.href);
   });
});
</script>

Answer 2

您的代码存在很多问题！

~~<script>不能包含在另一个<script>标记内。~~
在调用函数之前加载jQuery。
在$之前添加(document)。

所以你的代码应该是：

<script src='js/jquery-1.8.0.min.js'></script>
<script type='text/javascript' charset='utf-8'>
$(document).ready(function(){
  $('#but1').click(function(e){
    e.preventDefault();
    $('#mainx').load(this.href);
   });
});
</script>

使用jquery动态更改<div>失败</div>

2 个答案: