使用外部链接来定位标签内嵌内容

Question

我有一个带有选项卡式内联内容（多个 div）的精美框，用户可以通过单击选项卡名称来导航不同的“视图”。

我希望当用户单击导航中的链接以启动fancybox 时可以访问选项卡式内容。

因此，例如，如果用户单击新闻链接（或 .nav-primary 或 .nav-secondary 菜单中的任何链接），它将直接将他们带到新闻（或相关链接）的内嵌内容（视图） fancybox 而不是默认视图。

我如何定位一个 id，即主花式框 id #menu 中的 #news？我如何实现这一目标？

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

编辑

我认为解决方案在于更改点击时的哈希值，我可以通过定位一个类并给它一个目标哈希值来广泛地更改一个。我如何能够将源链接应用到#sources，将主题链接应用到#topics 等。

这是我的一般尝试

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

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