0

从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
        }
    });

控制台中没有错误。但是选项卡不能与 ajax 一起使用，因为它在页面加载中工作

4

1 回答 1

0

根据示例：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 );
        });         

    })

})
于 2013-09-11T09:30:35.723 回答