Целевая ссылка на встроенный контент с использованием внешних ссылок fancybox

Question

У меня есть причудливый бокс с встроенным содержимым в виде вкладок (несколько div), пользователь может перемещаться по разным «представлениям», нажав на имя закладки один раз уже в fancybox.

Я бы хотел, чтобы содержимое с вкладками было доступно, когда пользователь нажимает ссылку в навигации для запуска fancybox.

Так, например, если пользователь нажимает на ссылку новостей (или любую ссылку в .nav-primary или .nav-secondary menu), она будет передаваться непосредственно в новостной (или связанный) встроенный контент (просмотр) в fancybox вместо представления по умолчанию.

Как настроить таргетинг на id i.e. #news в главном fancybox id #menu? Как мне это достичь?

HTML

<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"> 
     <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> 
</div> 

JS

<script type="text/javascript"> 
$('.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 
     } 
    } 
}); 

EDIT

Я думаю, что решение заключается в изменении хэшей на клике. Я могу изменить его широко, наведя целевой класс и придав ему целевой хэш. Как я смогу применить источники ссылаются на #sources, темы ссылаются на #topics и т.д.

Это моя общая попытка

$('ul.nav-primary li a').click(function(e){ 
event.preventDefault(); 
window.location.hash = '#sources' 
}); 

EDIT 2

На клик есть Я могу настроить таргетинг на индекс вкладки так, чтобы эта вкладка была активной?

Answer 1

Я получил желаемые результаты, объединив цель данных и выбрав вкладки напрямую.

Вот сценарий

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