Question

你可以找到我的例子 [here] 选项卡运行良好，但只需要额外的功能。

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

默认情况下会选择第一个标签，但如果有人点击了链接<a href="#test">Go to anchor</a>，那么我想将它们带到第三个标签，然后向下滚动到<a name="test"></a>。

Answer 1

我在锚标记中添加了很少的更改goto属性，以便我们知道要移动到哪个标签。

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

添加以下代码以导航到stuff标签

中的锚标记

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

<强> DEMO

更新：Demo works

的方式

在演示中有3个标签和内容。在第一个标签中，内容是指向标签'Stuff'的链接。如果单击此链接，选项卡将更改，并且将显示选项卡“Stuff”的内容。更改标签的链接如下<a href="#test" goto="stuff">switch to Tab Stuff</a>。 goto的值必须与选项卡<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
}

希望这有帮助

链接到JQuery选项卡式内容中的锚点

1 个答案:

更新：Demo works