UI Tabs in Fancybox 2 with inline content. How to go directly to tab on click while preserving tabs

问题

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.

Currently if a user clicks any of the nav links the fancybox will open and they will always see the #sources "view".

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.

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?

HTML

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.

<nav class="navigation">
<ul class="nav-primary">
  <li class="nav-primary-item"><a class="menu" href="#menu"><i class="ico plus-yellow">+</i> Sources</a></li>
  <li class="nav-primary-item"><a class="menu" href="#menu"><i class="ico plus-yellow">+</i> Topics</a></li>
  <li class="nav-primary-item"><a class="menu" href="#menu"><i class="ico plus-yellow">+</i> Geography</a></li>
</ul>

<ul class="nav-secondary">
  <li class="nav-secondary-item"><a class="menu" href="#menu"><i class="ico plus-greyishblue">+</i> Tools</a></li>
  <li class="nav-secondary-item"><a class="menu" href="#menu"><i class="ico plus-greyishblue">+</i> Learn</a></li>
  <li class="nav-secondary-item"><a class="menu" href="#menu"><i class="ico plus-greyishblue">+</i> News</a></li>
</ul>

<div class="nav-menu" style="display: none">
  <div class="nav-tabs page_tabs" id="menu">
   <!---TABS I WANT TO PRESERVE--->
   <ul class="ui-tabs-nav" role="tablist">
    <li role="tab"><a href="#sources">Sources</a></li>
    <li role="tab"><a href="#topics">Topics</a></li>
    <li role="tab"><a href="#geography">Geography</a></li>
    <li role="tab"><a href="#tools">Tools</a></li>
    <li role="tab"><a href="#learn">Learn</a></li>
    <li role="tab"><a href="#news">News</a></li>
   </ul>

   <!--Sources and Uses-->
   <div id="sources">
     Content here
   </div>

   <!--Topics-->

   <div id="topics">
    Content Here
   </div>

   <!--Geography-->

   <div id="geography">
     Content Here
   </div>

   <!--Tools-->
   <div id="tools">
     Content Here
   </div>

   <!--Learn-->
   <div id="learn">
     Content Here
   </div>

   <!--News-->
   <div id="news">
     Content Here
   </div>
  </div>
 </div>
</nav>

Fancybox JS

$('.menu').fancybox({
  type: 'inline',
  scrolling: 'auto',
  width: 940,
  height: 'auto',
  padding: 0,
  autoSize: false,
  tpl: {
       closeBtn: '<a title="Close" class="fancybox-item fancybox-close fancyboxBtn" href="javascript:;"></a>'
   },
  helpers: {
   overlay: {
       locked: false
   }
  }
 });

This should illustrate what I mean buy preserve the tabs. If one clicks this link

They would get the sources content with the tab navigation

If one clicked this link with the href set directly to #sources content

They would get this jacked up view of the fancybox with the tabs missing

Again how can I directly target the inline content from the navigation links without losing the tabs?

回答1:

This worked for me

$(document).on("click", ".menu", function() {
var target = $(this).data("target");

if (target == 'sources') {
    jQuery('.page_tabs').tabs({ active: 0 });
}
if (target == 'topics') {
    jQuery('.page_tabs').tabs({ active: 1 });
}
if (target == 'geography') {
    jQuery('.page_tabs').tabs({ active: 2 });
}
if (target == 'tools') {
    jQuery('.page_tabs').tabs({ active: 3 });
}
if (target == 'learn') {
    jQuery('.page_tabs').tabs({ active: 4 });
}
if (target == 'news') {
    jQuery('.page_tabs').tabs({ active: 5 });
}
});

来源：https://stackoverflow.com/questions/39276560/ui-tabs-in-fancybox-2-with-inline-content-how-to-go-directly-to-tab-on-click-wh