Javascript 无法使用Jquery动态创建水平选项卡

我跟随这个网站使用Jquery动态创建水平选项卡

我已经为这段代码创建了一个提琴

有人能告诉我创建水平标签的有效方法吗？水平标签必须分成两行

我尝试了以下代码

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>');
    }
    var htmlbuild =$('</ul>');
    $("#tabs").append(htmlbuild);
}

函数createhorizontaltab（类别）{
var categoryArr=JSON.parse（categories）；
var htmlbuild=$（“
”）；
对于（var i=0；i固定：

$（文档）.ready（函数（）{
var categories='{“categories”：[{“name”：“零食”}，{“name”：“One”}，{“name”：“Two”}，{“name”：“Three”}，{“name”：“Four”}，{“name”：“Five”}，{“name”：“Six”}，{“name”：“Seven”}；
createhorizontaltab（类别）；
$（“#制表符”）.tabs（）；
});
函数createhorizontaltab（类别）{
var categoryArr=JSON.parse（categories）；
var htmlbuild=$（“
”）；
对于（VARI=0；我看不到您的代码与jQuery UI选项卡之间的关系，
var htmlbuild=$（“
”）
line正在覆盖以前放入
htmlbuild
中的所有内容，我不明白“水平选项卡必须拆分为两行”是什么意思。请查看此网站，两行表示我需要一行中的4项，另一行中的4项谢谢@user3674364，我很乐意帮助：）
$(document).ready(function () {
var categories= '{"categories":[{"name":"Snacks"},{"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>');
}
$("#tabs").append(htmlbuild);
}