Question

我刚刚开始使用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内容区域内 - 标签已消失。

我这里的目标是在一个公共登录页面中整合我在此网站上的几个网络应用程序，使用选项卡允许用户选择他们去的应用程序。但我似乎无法使其正常工作。

对我做错了什么的想法？

Answer 1

您需要更改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"));

Answer 2

我发现了问题 - 默认情况下web.api网站调用了modernizer-2.5.3.js - 不知怎的，这打破了jQuery的标签功能。

我不确定为什么，但是评论说明了所有内容。

jQuery选项卡在新窗口中打开？

2 个答案: