Question

I’m creating a new application using ASP.NET MVC.

I’d like to use a series of jQuery tabs at the top of my window to allow the user to access the various modules of the application.

I want to put the tabs in my shared layout view so that I don’t replicate them throughout the app.

I’m running into two conflicting issues that I can’t seem to find a coherent solution for:

1. When I click on a tab, I’d like the whole window to navigate to that page, rather than just loading the content into a div. I’m doing this to allow for bookmarking of a particular module. (I’d like the address bar to contain the URL of the current content, rather than just a “main page” URL.)

2. Currently when I call $(“#tabs”).tabs(); jQuery creates a div for each of my tabs and attempts to load the content of my href into the div. That ends up creating a copy of the page I’m on nested within itself.

Here are my tab definitions (from the default layout page):

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

And here’s the script I’m using to set them up:

function SetupTabs(sel) {

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

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

This actually gets my page navigating correctly, but nests the pages within themselves (issue #2 above). If I re-arrange it so that I have a main page, and load the content from the tabs using partial views, then I don’t have a usable URL in the address bar (issue #1 above).

Any ideas would be greatly appreciated. I know this isn’t the design paradigm for the jQuery tabs, but we’re using them elsewhere in the app and we use a lot of jQuery UI-themed elements, so I’d like to stick with them for this element, too, if I can make it work.

Thanks

Answer 1

Since you want each tab click to act as navigation, you may want to consider not using the JQueryUI Tabs, instead use a <ul> styled to look like tabs with the click events set to navigate to the pages you’d like.