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

Posted 2023-05-08

【中文标题】Jquery 选项卡 MVC 避免重复选项卡

【英文标题】：Jquery tabs MVC avoid duplicate tabs

【发布时间】：2012-12-10 18:50:29

【问题描述】：

点击使用 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>

我想添加具有唯一值的 id，而不是 jquery 给出的 justtab 编号，我将传递给该方法。所以这个<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>Rwest*** West***</span></a></li><li class="ui-state-default ui-corner-top"><a href="#ui-tabs-4"><span>Rwest*** West***</span></a></li><li class="ui-state-default ui-corner-top"><a href="#ui-tabs-6"><span>Rwest*** West***</span></a></li><li class="ui-state-default ui-corner-top"><a href="#ui-tabs-8"><span>Rwest*** West***</span></a></li><li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#ui-tabs-10"><span>Rwest*** West***</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

【问题讨论】：

你在使用 jquery UI 选项卡吗？你可以发布你的html代码吗？？

在这里找到了解决方案***.com/questions/10632155/…

【参考方案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);
 

【讨论】：

***.com/questions/10632155/…

【参考方案2】：

您应该检查是否有链接到该 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;

【讨论】：

我刚刚看到为您的标签生成的 HTML 与我得到的（或jqueryui.com/resources/demos/tabs/default.html 中的）不同。您能否发布一个为您的选项卡生成的 HTML 示例，其中包含指向您传递给 addTabs 的 URI 的链接（以便我可以尝试为您找出正确的选择器）。

添加了 javascript 代码来检查 URI 是否已经存在（对于您的 jQuery-UI 版本）。在 1.8 中，jQuery UI 将选项卡的 URL 保存在生成​​链接的 .data() 属性中。