JQuery 选项卡使用 ajax 加载 div

Question

我正在尝试使用 JQuery 选项卡和 ajax 将特定的 div 加载到选项卡：

<div id="tabs">
    <ul>
    <li><a href="#tabs-1">All Users</a></li>
    <li><a href="front_end/customer/customers.php#tabContent">Customers</li>
    <li><a href="#tabs-3">Availability</a></li>
    <li><a href="#tabs-4">Available Dates</a></li>
    <li><a href="#tabs-5">Instructors</a></li>
    </ul>

使用以下 JQuery

$(function() {
    $( "#tabs" ).tabs({
        load: function(event, ui) {
            console.log(ui);
        },
        ajaxOptions: {
            error: function( xhr, status, index, anchor ) {
                $( anchor.hash ).html(
                    "Couldn't load this tab" );
            }
        }
    });
});

但这是加载整个页面（第 2 里），而不仅仅是 #tabContent div。 我需要做什么才能让它加载 div？

Answer 1

以下是指定面板元素的方法。 只需将 aria-controls 属性添加到指向目标面板元素 ID 的选项卡 LI 元素：

<div id="tabs">
<ul>
    <li aria-controls="my-first-tab"><a href="ajax-content-1.html">Tab 1</a></li>
    <li aria-controls="my-second-tab"><a href="ajax-content-2.html">Tab 2</a></li>
    <li aria-controls="my-third-tab"><a href="ajax-content-3.html">Tab 3</a></li>
</ul>

<div id="my-first-tab"></div>
<div id="my-second-tab"></div>
<div id="my-third-tab"></div>

Answer 2

我认为您可能只需要在 url 中的#之前添加一个空格。

请参阅http://api.jquery.com/load上的“加载页面片段”