Jquery JSON and tabs

Question

我是jQuery的新手，需要一些帮助理解如何构造我的代码...我有一个工作的JSON页面，并且能够获得我的代码以显示预期的结果。现在，我想将这些结果放在选项卡式格式中。基本上，我的文章的标题在"标签"one_answers"下面的文章"中。我的代码现在显示在上面的标签区域上的所有标题，这是正确的，现在我需要将主体放在主要部分。最终结构应该看起来像这样：

<div id="tabs">
   <ul>
       <li><a href="#tabs-1">AAA</a></li>
       <li><a href="#tabs-2">BBB</a></li>
       <li><a href="#tabs-3">CCC</a></li>
   </ul>
   <div id="tabs-1"><h2>AAA</h2><p>This article is about AAA</p></div>
   <div id="tabs-2"><h2>BBB</h2><p>This article is about BBB</p></div>
   <div id="tabs-3"><h2>CCC</h2><p>This article is about CCC</p></div>
</div>

所以，我可以正确显示第一个选项卡式区域，但是我不知道如何检索第二组数据（文章的divs） - 我尝试复制函数searchCallback代码并重命名它，我尝试复制整个查询，都没有起作用。我知道由于我的经验不足，我只是缺少一些东西。有人可以向我展示正确的构建代码的方法吗？我真的很想学习这件事，我做了很多阅读，但还没有完全理解……我的脚本在下面，而JSON阵列结构低于此。谢谢。

<script>
var jsonURL = "//www.myurl.com/api.php?columns = id_cr, title, teaser & order = title & page = 1 ";
jQuery(document).ready(function() {
    jQuery.ajax({
        url: jsonURL,
        success: searchCallback
    });
});
function searchCallback(data) {
    var content_data = data.content_data.records;
    jQuery.each(content_data, function(index, content_dat) {
        jQuery(".tabs").append('<li><a href="#tabs-' + content_dat[0] + '">' + content_dat[2] + '</a></li>');
    });
};
</script>

<div id="tabs">
  <ul>
    <div class="tabs"></div>
  </ul>
  <div class="body"></div>
</div>
content_data    
 columns    
  0 "id_cr"
  1 "teaser"
  2 "title"
 records    
  0 
   0    "1"
   1    "This article is about AAA"
   2    "AAA"
  1 
   0    "2"
   1    "This article is about BBB"
   2    "BBB"
  3 
   0    "3"
   1    "This article is about CCC"
   2    "CCC"
 results    3

Answer 1

尝试此代码。由于我没有您的API URL，因此未经测试。

• 我从ul中删除了class tabs （类和ID的同一名称是不好的样式，您不需要它）

• 对于jQuery UI选项卡，您需要在UL中插入一个，而在UL中需要一个插入，而在UL之后，Tab的内容。<li><a href="#tabs-1">tabname</a><li> <div id="tabs-1">content</div>

• 不需要您的content_dat [0]，因为索引已经存在

  <script>
      var jsonURL = "http://www.myurl.com/api.php/content_data?columns=id_cr,title,teaser&order=title&page=1";
          jQuery(document).ready(function() {
              jQuery.ajax({
                  url: jsonURL,
                  success: searchCallback
              });
          });
          function searchCallback(data) {
              var content_data = data.content_data.records;
              jQuery.each(content_data, function(index, content_dat) {
                  jQuery("#tabs ul").append('<li><a href="#tabs-'+index+'">' + content_dat[2] + '</a></li>');
                  jQuery("#tabs ul").after("<div id='tabs-"+index+"'>"+content_dat[1]+"</div>");
              });
          };
      </script>
      <div id="tabs">
          <ul>
          </ul>
      </div>