1

我刚刚开始使用 jQuery 选项卡——我将它托管在 Web.API 站点中。我在我的（剃刀渲染的）页面中创建了我的标签，如下所示：

<div id="tabs">
    <ul>
        <li><a href="WebApiAppOne">ApplicationOne</a></li>
        <li><a href="WebApiAppTwo">ApplicationTwo</a></li>
    </ul>
</div>

我有以下 jQuery：

$( document ).ready( function () {
    $( "#tabs" ).tabs( {
        load: function ( event, ui ) {
            $( ui.panel ).delegate( 'a', 'click', function ( event ) {
                $( ui.panel ).load( this.href );
                event.preventDefault();
            } );
        },
        beforeLoad: function ( event, ui ) {
            ui.jqXHR.error( function () {
                ui.panel.html( "Unable to load tab content" );
            } );
        }
    } );
} );

第一个选项卡很好地显示了我的WebApiAppOne内容-但是当我单击下一个选项卡时，我直接转到http://localhost/WebApiAppTwo. 不在选项卡 2 内容区域内 - 选项卡已消失。

我的目标是将我在这个网站上的几个 Web 应用程序整合到一个共同的登录页面中，使用选项卡允许用户选择他们访问的应用程序。但我似乎无法让它正常工作。

对我做错了什么有任何想法吗？

4

2 回答 2

0

我发现了问题——web.api 站点默认调用modernizer-2.5.3.js——不知何故这破坏了jQuery 的选项卡功能。

我不知道为什么，但评论这个电话解决了所有问题。

于 2013-04-12T20:34:52.637 回答
0

您将需要更改 href 属性并添加自定义属性。

<div id="tabs">
    <ul>
        <li><a href="#WebApiAppOne" data-link="WebApiAppOne">ApplicationOne</a></li>
        <li><a href="#WebApiAppTwo" data-link="WebApiAppTwo">ApplicationTwo</a></li>
    </ul>
</div>

<div id="WebApiAppOne">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit
</div>
<div id="WebApiAppTwo">
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit
</div>

然后使用 attr 读取自定义属性并加载面板。

 $( ui.panel ).load( $(this).attr("data-link"));
于 2013-04-12T03:24:53.207 回答