Question

我希望在选择选项卡时将外部文本文件的内容加载到div中，但它似乎没有加载内容。有什么问题？

HTML：

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="CSS/common.css" />
    <script src="JS/common.js"></script>
    <title></title> 
  </head>
  <body>
    <nav>
      <ul id="tabs">
        <li><a href="#" id="tab1" name="#tab1">Home</a></li>
        <li><a href="#" id="tab2" name="#tab2">History</a></li>
        <li><a href="#" id="tab3" name="#tab3">Specifications</a></li>
        <li><a href="#" id="tab4" name="#tab4">Gallery</a></li>    
      </ul>
    </nav>
    <div id="content">
      <div id="tabContent1"></div>
      <div id="tabContent2"></div>
      <div id="tabContent3"></div>
      <div id="tabContent4"></div>
    </div>
  </body>
</html>

外部JS（common.js）：

$(document).ready(function() {
  $("#tab1").click(function() {
    $("#tabContent1").load("test.txt");
  });
});

Answer 1

你的语法似乎正确

确保文件的Url正确确保test.txt包含某些内容

Answer 2

你有这样的代码：

  $("#tab1").click(function() {
    $("#tabContent1").load("test.txt");
  });

但是有一条线

 $("#tabs li:first a").attr("id", "current"); // Activate first tab

将其ID从#tab1更改为#current，因此您需要更新代码：

  $("#current").click(function() {
    $("#tabContent1").load("test.txt");
  });

或者，更好的是，添加类当前而不是更改id：

$("#tabs li:first a").addClass("current")

JQuery - 加载外部文本文件

2 个答案: