0

我想删除标签而不选择它。当我选择一个选项卡并将其删除时。它工作正常。并且没有选择它它不起作用

HTML：

<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"   rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">  </script>
</head>
<body style="font-size:62.5%;">

<div id="tabs">
  <ul>
 </ul>
</div>
<input type='button' id='addTab' value='Add Tab'>
<input type='button' id='removeTab' value='RemoveTab'>
</body>
</html>

JS：

$(document).ready(function() {
    $("#tabs").tabs({
        tabTemplate: "<li><a href='#{href}'>#{label}</a> <p title='close' id='removeTab' style='cursor:pointer;display:inline'>x</p></li>"
    });
});

$(function() {
    var index = 0;
    index++;

    $("#addTab").live('click', function() {
        index++;
        var title = 'Tab.....  ' + index;
        var url = '#fragment-' + index;
        addTab(url, title, index);
    });

    function addTab(url, title, index) {
        $('#tabs').tabs("add", url, title, [index]);
    }

    $('#removeTab').live('click', function() {
        var $tabs = $('#tabs').tabs();
        var selected = $tabs.tabs('option', 'selected');
        alert(selected);
        $('#tabs').tabs("remove", [selected]);
    });
});​

JS 小提琴http://jsfiddle.net/andrewwhitaker/6VrwD/27/

4

3 回答 3

1

您可以像这样选择删除后的第一个选项卡：http: //jsfiddle.net/6VrwD/28/ 使用我添加的代码，您可以找出更复杂的逻辑，例如选择下一个选项卡（如果存在）等。

于 2012-05-09T13:40:25.913 回答
1

这是一个工作示例http://jsfiddle.net/k44Wk/即使它没有被选中，它也会删除单击的选项卡。

这是使事情起作用的修改部分：

$('#removeTab').live('click', function() {
    var $tabs = $('#tabs').tabs();
    var selected = $tabs.tabs('option', 'selected');
    if(selected == -1)
        selected = $('p[id=removeTab]').index(this);
    $('#tabs').tabs("remove", [selected]);
});

一件事，您应该避免对多个元素使用相同的 ID。

于 2012-05-09T13:58:30.500 回答
1

您可以从单击“x”图标的选项卡中获取 href 属性，并使用它来删除该选项卡。您可以通过执行以下操作来做到这一点：

var link = $('a', $(this).parent()).attr('href');
$('#tabs').tabs("remove", link);

唯一的事情是与 x 图标具有相同 ID 的删除按钮（您应该尽可能避免）现在正在寻找其父级中的第一个 a 元素（在本例中为）。最好的方法是删除删除提交或为单击该提交创建另一个功能。

于 2012-05-09T14:00:38.493 回答