Question

点击时我有一系列链接使用jquery添加标签。

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

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

我想的一种方法是添加一个id来锚定在jquery的tab里面创建的那个但是我不知道如何做到这一点

<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）上面的方法中添加选项卡后，将这个唯一值添加到选项卡锚。

EDIT1

$(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

Answer 1

您应该检查是否有链接到该网址的标签。一种方法是：

$('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;
}

Answer 2

试试这个，循环选项卡，检查标题是否存在。创建

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);
 }

}

Jquery选项卡MVC避免重复选项卡

2 个答案: