Question

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Collapse content</title>
<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="main.css">
<script>
$(function() {
    $( "#tabs" ).tabs({
     collapsible: true
   });
 });
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  $("#tabs-2").load("p2.html #content");
  </script>

</head>
<body>

<div id="tabs">
  <ul>
     <li><a href="#tabs-1">Alienware and Alpha</a></li>
     <li><a href="#tabs-2">More About</a></li>
     <li><a href="#tabs-3">Contact Us</a></li>
  </ul>
  <div id="tabs-1">
    <p><strong>Click this tab again to close the content pane.</strong>    </p>
    <p>Alienware is an American computer hardware subsidiary of Dell, Inc. Their products are designed for gaming purposes and are best known for their science-fiction-themed designs. Alienware was founded in 1996 by Nelson Gonzalez and Alex Aguila. Alienware Alpha is a line of PC-console hybrids introduced in 2014. It contains a custom-built Nvidia GeForce GTX 860M; a Core i3, i5, or i7 Intel Processor, depending on what model is purchased, up to 8 gigabytes of RAM; and between 500 gigabytes and 2 terabytes of hard drive space..</p>
  </div>
  <div id="tabs-2">
  </div>
.....(other ending tags, etc.)

我正在尝试从一个非常基本的网页加载内容，该网页除了具有div标签＃body的主体之外什么都没有。我希望它出现在我的标签2中。但它只是不会发生。我不确定我做错了什么。

p2.html： Ajax选项卡2

<body>
<div id="content">

    <p>Established in 1996 by Nelson Gonzalez and Alex Aguila, Alienware assembles desktops, notebooks, workstations, and PC gaming consoles. According to employees, the name "Alienware" was chosen because of the founders' fondness for the hit television series The X-Files, with names such as Area-51, Hangar 18, and Aurora.</p>
    </div>
    </body>
</html>

Answer 1

修改，更新

是的Chrome浏览器！

尝试关闭chrome，调整启动器，或使用/path/to/chrome --allow-file-access-from-files标志从终端启动。请参阅How do I make the Google Chrome flag "--allow-file-access-from-files" permanent?，--allow-file-access-from-files。另请参阅chrome://flags

当$("#tabs-2")在.load()元素中被<script></script>称为$("#tabs-2").load("p2.html #content");时，

<head></head>未定义？

尝试在$("#tabs-2").load("p2.html #content");

中移动$(function() {})

  $(function() {
    $( "#tabs" ).tabs({
      collapsible: true
    });
    $( "#datepicker" ).datepicker();
    $("#tabs-2").load("p2.html #content");
  });

Answer 2

在$（function（）{}

中放置$（“＃tabs-2”）。load（“p2.html #content”）

$(function () {
  $("#tabs-2").load("p2.html #content")
});

完整代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Tabs - Collapse content</title> 
    <link rel="stylesheet"
    href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
    $(function () {
        $("#tabs").tabs();
        $("#tabs-2").load("p2.html #content");
    });
</script>
</head>
<body>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Alienware and Alpha</a></li>
        <li><a href="#tabs-2">More About</a></li>
        <li><a href="#tabs-3">Contact Us</a></li>
    </ul>
    <div id="tabs-1">
        Your Text!!!
    </div>
    <div id="tabs-2">
    </div>
    <div id="tabs-3">
    </div>
</div>
</body>
</html>

p2.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
   <div id="content">
    This is p2 page!!!
   </div>
</body>
</html>

无响应的AJAX代码应该从不同的网页加载内容

2 个答案: