Question

当用户添加新标签时，我试图获取一个jQuery UI标签以在浏览器中显示（打开与标签相关的面板）。目前，这就是我的标签添加功能的样子。

let tabs = $("#tabs")
        .tabs({
            heightStyle: "content",
        })
        .on("click", ".delete-tab", function () {
            let panelName = $(this).closest("li").children('a').text();
            $('#deleteLocationModal').addClass('open');
            $('.locationNameHere').text(panelName);
            tabDelete = $(this).closest("li");
            deleteLocationNum = $(this).attr('data-locNum');
            console.log(deleteLocationNum);
        });

let locationNum = 1; //Tracks the number of tabs created, NOT the number of tabs on the screen

/**
 * Create a new tab
 * Create a new panel
 */
$("#addTab").on("click", function (evt) {
    /*addTab();*/
    locationNum++;
    let newTab = (generateTab(locationNum));
    $("#tabs").find("#addTab").before(newTab);
    let newPanel = (generatePanel(locationNum));
    $("#tabs").append(newPanel);
    $('#tabs').tabs("refresh");
    evt.preventDefault();
});

function generateTab(num) {
        return '<li class="tab"><a href="#location_' + num + '">New Location</a> <span data-locNum="' + num + '" class="delete-tab">&times;</span></li>';

    }

我尝试查看文档，但是不清楚在创建任何标签时显示标签的命令是什么。

Answer 1

您可以使用jQuery选择器而不是实际的DOM元素，也可以操纵tabs对象将某个标签设置为活动标签。

使用jQuery选择器：

function generateTab() {
  return $('<li>Some Tab</li>');
}

然后

$tab = generateTab();
$tab.someFocusFunction();

直接修改标签对象：

$('#tabs').tabs({ 
  active: $tab.attr('id');
});

创建后显示新的Jquery UI选项卡

1 个答案: