非活动标签中的jQuery目标锚标签

Question

我正在一家餐厅配送网站上工作，并试图找出如何从其他标签中定位标签中的锚标签的方法，例如，主要标签为：菜单，信息，评论，然后在菜单标签中我希望有一个子菜单列出食物类型（开胃菜，主菜等）。理想情况下，我希望它们一次全部可见，例如，如果您单击“评论”到“甜点”，则可以进入“菜单”选项卡甜点主播。

<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>

Answer 1

如何定位其他标签中某个标签内的锚标签？

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

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

Answer 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