Question

I have a fancy box with tabbed inline content (multiple divs) the user can navigate different "views" by clicking on the tab name once already in the fancybox.

I would like the tabbed content to be accessible when a user clicks the link in the navigation to launch the fancybox.

So for instance if the user clicks the news link (or any link in the .nav-primary or .nav-secondary menu) it will take them directly to the news (or related link) inline content (view) in the fancybox instead of the default view.

How would I target an id i.e. #news within the main fancybox id #menu? How do I achieve this?

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

I think the solution lies with changing the hashes on click I can change one broadly by targeting a class and giving it a target hash. How would I be able to apply the sources link to #sources, topics link to #topics etc.

This is my general attempt

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

EDIT 2

On click is there a way I can target the tab index so that that tab is active?

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

Target tabed inline content using external links fancybox

1 个答案: