Fancybox 2中具有内联内容的UI选项卡.如何在保留标签的同时直接转到标签上的标签 [英] UI Tabs in Fancybox 2 with inline content. How to go directly to tab on click while preserving tabs

问题描述

我有一个带有多个嵌入式内容实例的花式框.一旦fancybox被解雇，用户就可以在ui选项卡的帮助下看到不同的视图".但是，我试图将nav hrefs直接链接到这些内联实例.

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.

当前，如果用户单击任何导航链接，则花式框将打开，并且他们将始终看到#sources视图".

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.

有没有一种方法可以从导航链接中启动fancybox并保留ui-tabs并定位tab索引(或id)本身?那是解决方案吗?

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

nav-primary和nav-secondary链接是我在谈论的nav链接，因为您可以看到它们通过定位#menu打开了花哨框. #menu需要针对ui-tabs-nav(标签)显示.

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

如果点击此链接的href设置直接为#sources内容

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

他们会在没有标签的情况下获得fancybox的顶视图

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?

推荐答案

这对我有用

$(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 });
}
});

这篇关于Fancybox 2中具有内联内容的UI选项卡.如何在保留标签的同时直接转到标签上的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！