选项卡菜单不适用于AJAX

Question

从http://www.menucool.com/tabbed-content获得标签菜单，这在加载网页时效果很好。 我的问题是，当我点击一个按钮，AJAX完成并加载内容（使用此选项卡菜单内容），但它不能正常工作。

以下是我的屏幕截图，页面上载和AJAX加载，

正常页面加载 工作正常

AJAX加载

不工作

可能只会为页面加载加载js文件。

如何才能使其适用于AJAX

我的AJAX，

$.ajax({
        type: 'GET',
        url: destinationUrl,
        data: content, // my parameters
        dataType: "text",
        success: function(data) { // data is tab menu content
        $('#successDiv').html(data); // data is populated in successDiv
        }
    });

控制台中没有错误。但是tabbing不支持ajax在页面加载中工作

Answer 1

根据以下示例：http://www.menucool.com/tabbed-content

<ul class="tabs">
    <li><a href="#view1">Features</a></li>
    <li><a href="#view2">How to Use</a></li>
    <li><a href="#view3">Source Code</a></li>
</ul>
<div class="tabcontents">
    <div id="view1">
        content 1
    </div>
    <div id="view2">
        content 2
    </div>
    <div id="view3">
        content 3
    </div>
</div>

你可以这样做：

$(document).ready(function(){

    $("ul.tabs li a").click(function(){

        var menuId = $(this).prop('href');
        var el = $(menuId);
        menuId = id.substring(1);

        var request = $.ajax({
          url: "script.php",
          type: "POST",
          data: {id : menuId},
          dataType: "html"
        });

        request.done(function(msg) {
          el.html( msg );
        });

        request.fail(function(jqXHR, textStatus) {
          alert( "Request failed: " + textStatus );
        });         

    })

})