0

我希望在选择选项卡时将外部文本文件的内容加载到 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");
  });
});
4

2 回答 2

0

您的语法似乎正确

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

于 2013-02-05T18:37:41.213 回答
0

你有这样的代码：

  $("#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")
于 2013-02-05T18:50:56.963 回答