0

您可以在[此处]找到我的示例 选项卡运行良好，但只需要额外的功能。

我<a name="test"></a>在“Stuff”选项卡中的标题“Anchor”旁边。

默认情况下，第一个选项卡被选中，但如果有人点击链接<a href="#test">Go to anchor</a>，那么我想将他们带到第三个选项卡并向下滚动到<a name="test"></a>.

4

1 回答 1

2

我所做的一些更改在锚标记中添加了 goto 属性，以便我们知道要移动到哪个选项卡。

<a href="#test" goto="stuff">

添加了以下代码以导航到stuff选项卡内的锚标记

$('html, body').animate({
   scrollTop: x // where a tag is 
});

演示

更新：演示如何工作

在演示中有 3 个选项卡和内容。在第一个选项卡内容中是指向选项卡“东西”的链接。如果您单击此链接，选项卡会发生变化，并且将显示选项卡“Stuff”的内容。更改选项卡的链接如下所示<a href="#test" goto="stuff">switch to Tab Stuff</a> 。goto 的值必须与 tab 的 hash tag 的值相同<li><a href="#stuff">Stuff</a></li>。下面的函数获取属性'goto'的值，将值放入var whereTo并执行点击选择器匹配'a[href=#' + whereTo + ']'

$('a').not('.tabs li a').on('click', function(evt) {
    evt.preventDefault();
    var whereTo = $(this).attr('goto');
    $tabs = $("ul.tabs li");
    $tabs.find('a[href=#' + whereTo + ']').trigger('click');
    // code shortened to keep explanation simple
}

希望这可以帮助

于 2012-05-15T08:05:29.943 回答