0

单击使用 jquery 添加选项卡时，我有一系列链接。

function addTab(title, uri) {
    var newTab = $("#tabs").tabs("add", uri, title);
}

我想要每个链接只有一个标签。如果用户不断按下链接，它会不断向该 div 添加新选项卡。

我在想的一种方法是添加一个 id 到由 jquery 在 Tab 的 li 内创建的锚点，但我不知道该怎么做

<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#ui-tabs-4"><span>Ncollison Collison</span></a></li>

而不是jquery给出的justtab数字，我想添加具有唯一值的id，我将传递给该方法。所以这 <a href="#ui-tabs-4"> 变成<a href="#ui-tabs-4" id="12323"> 了我可以在添加另一个选项卡之前检查这个 ID。在 addTab(title, uri, uniquevlaue) 上面的方法中添加选项卡后，我不确定如何将此唯一值添加到选项卡锚点。

编辑1

$(function () {

    $('#tabs').tabs(
        { cache: true },
        {
            ajaxOptions: {
                cache: false,
                error: function (xhr, status, index, anchor) {
                    $(anchor.hash).html("Couldn't load this tab.");
                },
                data: {},
                success: function (data, textStatus) { }
            },
            add: function (event, ui) {
                //select the new tab
                $('#tabs').tabs('select', '#' + ui.panel.id);
            }
        });
});

function addTab(title, uri) {
    // If tab already exist in the list, return
    if ($("#" + title).length != 0)
        return;
    var newTab = $("#tabs").tabs("add", uri, title);
}

function closeTab() {
    var index = getSelectedTabIndex();
    $("#tabs").tabs("remove", index)
}

function getSelectedTabIndex() {
    return $("#tabs").tabs('option', 'selected');
}

function RefershList() {
    $('#frmPeopleList').submit();
}


    <div id="tabs">
        <ul>
        </ul>
    </div>

我有类似于下面的链接

 <input id="btnAddTab" type="button" onclick="addTab('Add Person','<%= Url.Action("Create", "People")  %>')" value='Add New Person' />

编辑 2 生成的 HTML

<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
        <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
        <li class="ui-state-default ui-corner-top"><a href="#ui-tabs-2"><span>Rwestbrook Westbrook</span></a></li><li class="ui-state-default ui-corner-top"><a href="#ui-tabs-4"><span>Rwestbrook Westbrook</span></a></li><li class="ui-state-default ui-corner-top"><a href="#ui-tabs-6"><span>Rwestbrook Westbrook</span></a></li><li class="ui-state-default ui-corner-top"><a href="#ui-tabs-8"><span>Rwestbrook Westbrook</span></a></li><li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#ui-tabs-10"><span>Rwestbrook Westbrook</span></a></li></ul><div id="ui-tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"><h2>Chat</h2>
<input type="text" value=" " id="msg">
<input type="button" value="send" id="send">
<ul id="message">
</ul></div><div id="ui-tabs-4" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"><h2>Chat</h2>
<input type="text" value=" " id="msg">
<input type="button" value="send" id="send">
<ul id="message">
</ul></div><div id="ui-tabs-6" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"><h2>Chat</h2>
<input type="text" value=" " id="msg">
<input type="button" value="send" id="send">
<ul id="message">
</ul></div><div id="ui-tabs-8" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"><h2>Chat</h2>
<input type="text" value=" " id="msg">
<input type="button" value="send" id="send">
<ul id="message">
</ul></div><div id="ui-tabs-10" class="ui-tabs-panel ui-widget-content ui-corner-bottom"><h2>Chat</h2>
<input type="text" value=" " id="msg">
<input type="button" value="send" id="send">
<ul id="message">
</ul></div>
    <div id="ui-tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom"></div><div id="ui-tabs-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div><div id="ui-tabs-5" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div><div id="ui-tabs-7" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div><div id="ui-tabs-9" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div></div>

发送的 URI 是 '/Chat/AddChat

4

2 回答 2

1

您应该检查是否有链接到该 URL 的选项卡。一种方法是：

$('a.ui-tabs-anchor[href="' + uri + '"]').length > 0;

.ui-tabs-anchor 是分配给选项卡的“a”标签的类，至少在当前的 jquery UI 版本中是这样。

-- 之前的代码是针对 JQuery-UI 1.9，针对 1.8（可能还有之前的版本）：

function urlExists(uri) {
    var exists = false; 
    $.each($('#tabs a'), function() { 
        exists = exists || $(this).data('href.tabs') == uri }
     );
    return exists;
}
于 2012-12-24T10:26:25.647 回答
1

试试这个，遍历标签，检查标题是否存在 ..create

function addTab(title, uri) {
   var tabNameExists = false;
  $('#tabs ul li a').each(function(i) {
    if (this.text == title) {
     tabNameExists = true;
    }
  });

 if (!tabNameExist){
    var newTab = $("#tabs").tabs("add", uri, title);
 }

}
于 2012-12-24T10:52:40.983 回答