非活动选项卡内的 jQuery 目标锚标记答案

【问题标题】：jQuery target anchor tags inside unactive tabs非活动选项卡内的 jQuery 目标锚标记
【发布时间】：2013-02-27 16:29:43
【问题描述】：

我正在开发一家餐厅外卖网站，并试图弄清楚如何从其他标签中定位标签内的锚标签，例如，主标签是：菜单、信息、评论，然后在里面菜单选项卡我想要一个列出食物类型（开胃菜、主菜等）的子菜单菜单选项卡到甜点锚点。

<ul class='tabs'>
<li><a href='#tab1'>Menu</a></li>
    <ul class="submenu">
       <?php foreach ($contents as $header_id => $item_array): ?>
       <li>
          <a href="#<?php echo $item_array[0]["content"] ?>"><?php echo $item_array[0]["content"] ?></a>
       </li>
      <?php endforeach; ?>
    </ul>
<li><a href='#tab2'>Info</a></li>
<li><a href='#tab3'>Reviews</a></li>
</ul>

【问题讨论】：

标签： javascript jquery tabs tags anchor

【解决方案1】：

如何从其他选项卡定位选项卡内的锚标记？

尝试使用find() 方法，该方法“获取当前匹配元素集中每个元素的后代，由选择器、jQuery 对象或元素过滤。”

$('ul.tabs li ul.submenu').each(function() {
    var anchors = $(this).find('a'); //these anchors are per sub menu.
});

【讨论】：

那么从这里开始，我将如何编写“如果单击子菜单项；打开菜单选项卡并转到锚点”有什么想法吗？

【解决方案2】：

要通过单击链接从一个选项卡切换到另一个选项卡，您可能需要将自定义处理程序附加到这些链接。

例如：

HTML：

<li><a href="#" class="desertLink">Dessert</a></li>

JS：

$(".desertLink").click(function(){
  $( ".tabs" ).tabs( "option", "active", 1 );
  $( "html, body" ).animate({scrollTop:$('#dessert_id').position().top}, 'slow');
});

会将您的选项卡从“菜单”选项卡切换到“信息”选项卡。

有关更多选项，请查看http://api.jqueryui.com/tabs/#option-active 的 Tabs API

【讨论】：

我可以在顶级选项卡之间导航，我想弄清楚如何从“信息”之类的选项卡转到菜单 div 中的锚标记。例如，从“信息”选项卡中，单击“甜点”，这将打开菜单选项卡并转到“甜点锚”标签。
切换标签后，您可以使用scrollTop...我更新了答案以显示示例。