UI-Registerkarten in Fancybox 2 mit Inline-Inhalt. Wie gehe ich direkt zum Tab bei Klick, während Tabs beibehalten

Question

Ich habe eine Fancybox mit mehreren Instanzen von Inline-Inhalten. Sobald die fancybox gefeuert wird, können Benutzer verschiedene "Ansichten" mit Hilfe von ui Tabs sehen. Ich versuche jedoch, nav hrefs direkt mit diesen Inline-Instanzen zu verknüpfen.

Derzeit, wenn ein Benutzer auf einen der Nav-Links klickt, öffnet sich die Fancybox und sie sehen immer die #sources "view".

Ich kann direkt mit anderen Inline-Instanzen verknüpfen, aber ich würde nur diese Inline-Inhalt und nicht die Tabs selbst, die ein wichtiger Teil des Designs sind.

Es gibt einen Weg, ich kann die fancybox aus dem Nav-Links die Ui-Tabs beibehalten und zielen auf die Registerkarte Index (oder ID) selbst? Ist das überhaupt die Lösung?

HTML

die nav-primären und sekundären nav-Links sind die nav Links, die ich gesprochen habe, wie Sie sie die fancybox durch gezielte #menu eröffnen sehen. #menu muss als Ziel ausgewählt werden, damit die ui-tabs-nav (tabs) angezeigt werden.

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

Dies sollte zeigen, was ich kaufen bedeuten die Tabs erhalten. Wenn man klickt auf diesen Link

Sie würden die Quellen Inhalt der Tabulatornavigation

Wenn man diese Verbindung mit dem href geklickt direkt Inhalt #sources gesetzt bekommen

Sie würden diese aufgebockte Ansicht der Fancybox mit den fehlenden Tabs

bekommen

Wieder wie kann ich die Inline-Inhalte aus den Navigations-Links direkt zielen, ohne die Registerkarten zu verlieren?

Answer 1

Das ist für mich gearbeitet

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