Question

我正在尝试构建动态负责创建Jquery Horizontal Tabbed菜单的代码。

$(document).ready(function () {
    $( "#tabs" ).tabs();
  });
  </script>
</head>
<body>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">One</a></li>
    <li><a href="#tabs-2">Two</a></li>
    <li><a href="#tabs-3">Three</a></li>
  </ul>

<div id="tabs-1">
  </div> 
  <div id="tabs-2">
  </div>
  <div id="tabs-3">
     </div>
</div>

</div>

我试过了

$(document).ready(function () {
var categories= '{"categories":[{"name":"One"},{"name":"Two"},{"name":"Three"},{"name":"Four"},{"name":"Five"},{"name":"Six"},{"name":"Seven"}]}'; 
createhorizontaltab(categories);
$("#tabs").tabs();
});

function createhorizontaltab(categories) {
var categoryArr = JSON.parse(categories);
var htmlbuild =('<ul>');
for(var i=0;i<categoryArr.categories.length;i++)
{
 var name = categoryArr.categories[i].name;
 htmlbuild.append('<li><a href="'+name+'">'+name+'</a></li>');
htmlbuild.append('<div id="'+name+'"/>');
}
 htmlbuild.append('</ul>');

$("#tabs").append(htmlbuild);
}

</script>
</head>
<body>
 <div id="tabs">
</div>

但是我得到了Uncaught TypeError：undefined不是该行的函数

<li><a href="'+name+'">'+name+'</a></li>

有人可以告诉我导致错误的原因。为什么它没有构建标签？

Answer 1

可能你应该这样做

var htmlbuild =$('<ul>');

我认为你错过了$那里。

Answer 2

$(document).ready(function () {
    var categories = '{"categories":[{"name":"One"},{"name":"Two"},{"name":"Three"},{"name":"Four"},{"name":"Five"},{"name":"Six"},{"name":"Seven"}]}';
    createhorizontaltab(categories);
    $("#tabs").tabs({});
});

function createhorizontaltab(categories) {
    var categoryArr = JSON.parse(categories);
    var htmlbuild = $('<ul>');
    for (var i = 0; i < categoryArr.categories.length; i++) {
        var name = categoryArr.categories[i].name;
        htmlbuild.append('<li><a href="' + name + '">' + name + '</a></li>');
        htmlbuild.append('<div id="' + name + '"/>');
    }
    htmlbuild.append('</ul>');

    $("#tabs").append(htmlbuild);
}

创建Jquery水平菜单带有动态数据的选项卡

2 个答案: