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

Question

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

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

我想将选项卡放在共享布局视图中，以免在整个应用程序中复制它们。

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

1. 当我单击选项卡时，我希望整个窗口导航到该页面，而不是仅将内容加载到div中。 我这样做是为了为特定模块添加书签。 （我希望地址栏包含当前内容的URL，而不仅仅是“主页” URL。）

2. 当前，当我调用$（“＃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>样式化为看起来像选项卡的方式，并且将click事件设置为导航到想要的页面。