Question

我正在使用ASP.NET MVC创建一个新的应用程序。

我想在窗口顶部使用一系列jQuery选项卡，以允许用户访问应用程序的各个模块。

我想将标签放在我的共享布局视图中，这样我就不会在整个应用程序中复制它们。

我遇到了两个相互矛盾的问题，我似乎无法找到一个连贯的解决方案：

当我点击一个标签时，我希望整个窗口导航到该页面，而不是仅仅将内容加载到div中。我这样做是为了允许特定模块的书签。（我希望地址栏包含当前内容的网址，而不仅仅是“主页”网址。）
目前我拨打$（“＃tabs”）。tabs（）; jQuery为我的每个选项卡创建一个div，并尝试将我的href内容加载到div中。这最终会创建我嵌套在其中的页面的副本。

以下是我的标签定义（来自默认布局页面）：

   <section class="tabs">
        <div id="tabs">
            <ul>
                <li><a href="Home" rel="Home">Instructions</a></li>
                <li><a href="Questions" rel="Questionnaire">Questions</a></li>
                <li><a href="Submit" rel="SubmitAndConfirm">Finish</a></li>
                <li><a href="FAQ">FAQ</a></li>
            </ul>
        </div>
    </section>

这是我用来设置它们的脚本：

function SetupTabs(sel) {

    $("#tabs").tabs();

    $("#tabs").tabs("select", sel); // Selects the tab
    $('#tabs').tabs({
        select: function (event, ui) {
            location.href = ui.tab.rel;
        }
    });
}

这实际上让我的页面正确导航，但将页面嵌入其中（上面的问题＃2）。如果我重新安排它以便我有一个主页面，并使用部分视图从选项卡加载内容，那么我在地址栏中没有可用的URL（上面的问题＃1）。

任何想法都将不胜感激。我知道这不是jQuery选项卡的设计范例，但我们在应用程序的其他地方使用它们，我们使用了很多jQuery UI主题元素，所以我也想为这个元素坚持使用它们，如果我能使它发挥作用。

由于

Answer 1

由于您希望每个选项卡单击以充当导航，您可能需要考虑不使用JQueryUI选项卡，而是使用<ul>样式看起来像选项卡，点击事件设置为导航到您'的页面我喜欢。

如何在ASP.NET MVC应用程序中使用jQuery选项卡进行导航？

1 个答案: