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

上的标签API

jQuery目标锚标签在非活动标签内

2 个答案: