jquery - 创建后显示新的 Jquery UI 选项卡
问题描述
当用户添加新选项卡时,我试图让 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">×</span></li>';
}
我曾尝试查看文档,但并不清楚在创建任何选项卡时显示选项卡的命令是什么。
解决方案
您可以使用 jQuery 选择器而不是实际的 DOM 元素或操作选项卡对象来将某个选项卡设置为活动选项卡。
使用 jQuery 选择器:
function generateTab() {
return $('<li>Some Tab</li>');
}
接着
$tab = generateTab();
$tab.someFocusFunction();
直接修改 tabs 对象:
$('#tabs').tabs({
active: $tab.attr('id');
});
推荐阅读
- php - htaccess https://example.com/dash/something 链接重定向问题
- android - Flutter 应用无法在某些设备上运行
- json - 不使用序列化程序的 crud 操作
- python - 使用 KivyMD 构建接口时如何修复“AttributeError: 'NoneType' object has no attribute 'rgba'”?
- java - 如何在 toString() 方法中返回 2 前导 0?
- xslt - 序列是如何拼接的,为什么我的变量值是文档节点?
- reactjs - 图像在本地服务器上运行良好,但无法在远程服务器上加载?
- rest - 单个令牌是否可以防止 RESTful API 中的 csrf?
- php - laravel eloquent whereIn 子句中可以使用的数组的最大大小是多少?
- c# - 实体框架连接来自两个不同实体的表