title: How can I use jQuery tabs for navigation in my ASP.NET MVC app?
body: <p>I'm creating a new application using ASP.NET MVC. </p>
  
  <p>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.</p>
  
  <p>I want to put the tabs in my shared layout view so that I don't replicate them throughout the app.</p>
  
  <p>I'm running into two conflicting issues that I can't seem to find a coherent solution for:</p>
  
  <ol>
  <li><p>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.)</p></li>
  <li><p>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.</p></li>
  </ol>
  
  <p>Here are my tab definitions (from the default layout page):</p>
  
  <pre><code>   &lt;section class="tabs"&gt;
          &lt;div id="tabs"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="Home" rel="Home"&gt;Instructions&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="Questions" rel="Questionnaire"&gt;Questions&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="Submit" rel="SubmitAndConfirm"&gt;Finish&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="FAQ"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p>And here's the script I'm using to set them up:</p>
  
  <pre><code>function SetupTabs(sel) {
  
      $("#tabs").tabs();
  
      $("#tabs").tabs("select", sel); // Selects the tab
      $('#tabs').tabs({
          select: function (event, ui) {
              location.href = ui.tab.rel;
          }
      });
  }
  </code></pre>
  
  <p>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).</p>
  
  <p>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.</p>
  
  <p>Thanks</p>