jQuery JSON和选项卡

Question

I am new to JQuery and need some help understanding how to structure my code... I have a working JSON page and have been able to get my code to display the intended results. Now I want to put those results in a tabbed format. Basically the title of my article is in the tab and the body of the article underneath. My code right now shows all of the titles in the tabbed area up top, which is correct, now I need to get the body in the main part. The final structure should look like this:

<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>

So, I can get the first tabbed area to show correctly, but I don't know how to retrieve the second set of data (the divs for the article) - I have tried duplicating the function searchcallback code and renaming it, I have tried duplicating the entire query, neither worked. I know I am just missing something due to my inexperience. Can someone show me the correct way to structure the code? I really want to learn this, I have done a lot of reading but am not fully understanding yet... my script is below and the JSON array structure is below that. Thank you.

<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

try this code. it is untested as i do not have your api url.

• i removed the class tabs from the ul (class and id with same name is bad style and you do not need it)

• for JQUERY UI TABS you need one insert in the ul for the tab itself, and another for the tab's content after the ul. <li><a href="#tabs-1">tabname</a><li> <div id="tabs-1">content</div>

• your content_dat[0] is not needed, as the index is already there

  <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>