0

我正在动态创建选项卡。我创建了一个按钮removeTabs来删除选项卡。它工作正常，但是当我尝试使用 div * x * 时它不起作用..

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>
    <script>
        $(document).ready(function() {
            $("#tabs").tabs();
        });
    </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：

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

    $("#addTab").live ('click',function() {
        index++;
        var title = 'Tab.....  ' + index + ' <p title="close" id="removeTab" style="cursor: pointer; display: inline" >x</p>';
        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] );        
    });
});

​当我点击x时它不起作用

JS 小提琴：http: //jsfiddle.net/6VrwD/23/

4

2 回答 2

1

您不能拥有多个具有相同 id 的元素。尝试使用特定的类，例如add-taband remove-tab。

编辑1：

我看起来好像您的问题与<p>在锚点中呈现标签的选项卡有关。您可能可以通过X在锚点之后添加然后绑定点击事件来摆脱困境。

编辑2：

我第一次遇到 jqueryui 选项卡 :) --- 根据这个例子，你似乎需要一个 tabTemplate：http: //jqueryui.com/demos/tabs/#manipulation

于 2012-05-09T12:23:05.730 回答
1

我会为此使用该tabTemplate选项，就像在他们提供的演示中一样：

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

...然后稍微调整其余的 JS：

$(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]);
    });
});​

示例：http: //jsfiddle.net/andrewwhitaker/6VrwD/27/

此外，您可能希望在生成的选项卡上使用类而不是 id。在一个页面上拥有多个具有相同id属性的元素是无效的，并且可能会导致问题。

于 2012-05-09T13:10:28.300 回答