Question

我正在尝试使用带有ajax的JQuery选项卡将特定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" );
            }
        }
    });
});

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

Answer 1

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

请参阅http://api.jquery.com/load

上的“加载页面片段”

Answer 2

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

<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>

使用ajax加载div的JQuery选项卡

2 个答案: