title: UI Tabs in Fancybox 2 with inline content. How to go directly to tab on click while preserving tabs
body: <p>I have a fancybox with multiple instances of inline content. Once the fancybox is fired users can see different "views" with the help of ui tabs. However I am trying to directly link nav hrefs to these inline instances. </p>
  
  <p>Currently if a user clicks any of the nav links the fancybox will open and they will always see the #sources "view". </p>
  
  <p>I can link directly to other inline instances however I would only get that inline content and not the tabs themselves which are an important part of the design. </p>
  
  <p>Its there a way I can launch the fancybox from the nav links preserve the ui-tabs and target the tab index (or id) itself? Is that even the solution?</p>
  
  <p><strong>HTML</strong></p>
  
  <p>the nav-primary and nav-secondary links are the nav links I was talking about as you can see they open up the fancybox by targeting #menu. #menu needs to be targeted for the ui-tabs-nav (tabs) to show. </p>
  
  <pre><code>&lt;nav class="navigation"&gt;
  &lt;ul class="nav-primary"&gt;
    &lt;li class="nav-primary-item"&gt;&lt;a class="menu" href="#menu"&gt;&lt;i class="ico plus-yellow"&gt;+&lt;/i&gt; Sources&lt;/a&gt;&lt;/li&gt;
    &lt;li class="nav-primary-item"&gt;&lt;a class="menu" href="#menu"&gt;&lt;i class="ico plus-yellow"&gt;+&lt;/i&gt; Topics&lt;/a&gt;&lt;/li&gt;
    &lt;li class="nav-primary-item"&gt;&lt;a class="menu" href="#menu"&gt;&lt;i class="ico plus-yellow"&gt;+&lt;/i&gt; Geography&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul class="nav-secondary"&gt;
    &lt;li class="nav-secondary-item"&gt;&lt;a class="menu" href="#menu"&gt;&lt;i class="ico plus-greyishblue"&gt;+&lt;/i&gt; Tools&lt;/a&gt;&lt;/li&gt;
    &lt;li class="nav-secondary-item"&gt;&lt;a class="menu" href="#menu"&gt;&lt;i class="ico plus-greyishblue"&gt;+&lt;/i&gt; Learn&lt;/a&gt;&lt;/li&gt;
    &lt;li class="nav-secondary-item"&gt;&lt;a class="menu" href="#menu"&gt;&lt;i class="ico plus-greyishblue"&gt;+&lt;/i&gt; News&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div class="nav-menu" style="display: none"&gt;
    &lt;div class="nav-tabs page_tabs" id="menu"&gt;
     &lt;!---TABS I WANT TO PRESERVE---&gt;
     &lt;ul class="ui-tabs-nav" role="tablist"&gt;
      &lt;li role="tab"&gt;&lt;a href="#sources"&gt;Sources&lt;/a&gt;&lt;/li&gt;
      &lt;li role="tab"&gt;&lt;a href="#topics"&gt;Topics&lt;/a&gt;&lt;/li&gt;
      &lt;li role="tab"&gt;&lt;a href="#geography"&gt;Geography&lt;/a&gt;&lt;/li&gt;
      &lt;li role="tab"&gt;&lt;a href="#tools"&gt;Tools&lt;/a&gt;&lt;/li&gt;
      &lt;li role="tab"&gt;&lt;a href="#learn"&gt;Learn&lt;/a&gt;&lt;/li&gt;
      &lt;li role="tab"&gt;&lt;a href="#news"&gt;News&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
  
     &lt;!--Sources and Uses--&gt;
     &lt;div id="sources"&gt;
       Content here
     &lt;/div&gt;
  
     &lt;!--Topics--&gt;
  
     &lt;div id="topics"&gt;
      Content Here
     &lt;/div&gt;
  
     &lt;!--Geography--&gt;
  
     &lt;div id="geography"&gt;
       Content Here
     &lt;/div&gt;
  
     &lt;!--Tools--&gt;
     &lt;div id="tools"&gt;
       Content Here
     &lt;/div&gt;
  
     &lt;!--Learn--&gt;
     &lt;div id="learn"&gt;
       Content Here
     &lt;/div&gt;
  
     &lt;!--News--&gt;
     &lt;div id="news"&gt;
       Content Here
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p><strong>Fancybox JS</strong></p>
  
  <pre><code>$('.menu').fancybox({
    type: 'inline',
    scrolling: 'auto',
    width: 940,
    height: 'auto',
    padding: 0,
    autoSize: false,
    tpl: {
         closeBtn: '&lt;a title="Close" class="fancybox-item fancybox-close fancyboxBtn" href="javascript:;"&gt;&lt;/a&gt;'
     },
    helpers: {
     overlay: {
         locked: false
     }
    }
   });
  </code></pre>
  
  <p>This should illustrate what I mean buy preserve the tabs. If one clicks this link </p>
  
  <p><a href="https://i.stack.imgur.com/CsiYK.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CsiYK.jpg" alt="with #menu as href"></a></p>
  
  <p>They would get the sources content with the tab navigation</p>
  
  <p><a href="https://i.stack.imgur.com/L9xoQ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/L9xoQ.jpg" alt="fancybox with tab navigation always shows sources and uses first when href is #menu"></a></p>
  
  <p>If one clicked this link with the href set directly to #sources content 
  <a href="https://i.stack.imgur.com/Eisxs.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Eisxs.jpg" alt="enter image description here"></a></p>
  
  <p>They would get this jacked up view of the fancybox with the tabs missing</p>
  
  <p><a href="https://i.stack.imgur.com/MUtrC.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MUtrC.jpg" alt="enter image description here"></a></p>
  
  <p>Again how can I directly target the inline content from the navigation links without losing the tabs?</p>