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

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の代わりにクラスを使用することもできます。id1つのページに同じ属性を持つ複数の要素があることは無効であり、おそらく問題が発生します。

于 2012-05-09T13:10:28.300 に答える
1

同じIDを持つ要素を複数持つことはできません。add-tabおよびのような特定のクラスを使用してみてくださいremove-tab。

編集1：

<p>あなたの問題は、アンカーでタグをレンダリングするタブに関連しているように見えます。おそらくX、アンカーの後にafterを追加してから、クリックイベントをバインドすることで解決できます。

編集2：

初めてjqueryuiタブに出くわしました:)---この例のようにtabTemplateが必要であるように見えます：http：//jqueryui.com/demos/tabs/#manipulation

于 2012-05-09T12:23:05.730 に答える