根据 JSON 创建 jquery 个标签页

Question

编辑： 我正在大量更改问题以反映我对问题的新理解。我现在有一个可变长度 {"CORE 1":"alfa", "CORE 2":"beta", ...} 的 JSON 文件，我想在该文件上生成一些 (https://jqueryui.com/tabs/ jquery) 基于键的选项卡名称并将值用于选项卡的内容。

<div id="tabs_3">
      <ul  class="clicked">
        <li><a href="#tabs_3-1">CORE 1</a></li>
        <li><a href="#tabs_3-2">CORE 2</a></li>    
      </ul>

      <div id="tabs_3-1">      
        # alpha
</div>

      <div id="tabs_3-2">
        # beta
      </div>
                </div>

我该怎么做？

Answer 1

我认为您必须更改对象的结构才能在 jquery 中动态添加选项卡，例如：this----> {"CORE 1":"alfa", "CORE 2":"beta", ...} 转换为 this---- > [{"CORE":"alfa"},{ "CORE":"beta"}, ...] 您将使用 for 或任何您想要的 bucle 来访问数据。

Answer 2

Javascript

var data = [{"CORE":"tabs-1","title":"alfa"},{ "CORE":"tabs-2","title":"beta"},{"CORE":"tabs-3","title":"gamma"}];

var stringData = "";

for (var i = 0; i < data.length ; i++) {
  stringData += "<li><a href=#"+data[i]['CORE']+">"+data[i]['title']+"</a></li>"
}
console.log(stringData);
$(".list").append(stringData);

$( "#tabs" ).tabs();

html 看起来像这样

 <ul class="list">  </ul>
 <div id="tabs-1">...</div>
<div id="tabs-2">...</div>
<div id="tabs-3">...</div>

注意 id 属性等于 json 文件的核心数据插入

根据 JSON 创建 jquery 个标签页

create jquery tabs based off a JSON

javascript

django

jquery

jquery-ui-tabs