链接到JQuery选项卡式内容中的锚点 [英] Link to an anchor within JQuery tabbed content

问题描述

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

You can find my example [here] The tabs are working well but just need that extra functionality.

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

I have <a name="test"></a> next to the header "Anchor" within the "Stuff" tab.

默认情况下，第一个标签被选中，但如果有人点击某个链接< a href =＃test>转到锚点< / a> 然后我想将它们带到第三个标签页并向下滚动到< a name =test>< / a> 。

By default the first tab is selected but if someone clicks on a link <a href="#test">Go to anchor</a> then I would like to take them to the third tab and scroll down to <a name="test"></a>.

推荐答案

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

Few changes I made are added goto attribute in anchor tag so that we know which tab to move to.

< a href =#testgoto =stuff>

添加以下代码以导航到内容中的锚标记标签

added the below code to navigate to the anchor tag inside stuff tab

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

DEMO

DEMO

在演示中有3个选项卡和内容。在第一个选项卡中，内容是指向Stuff选项卡的链接。如果单击此链接，选项卡将更改，并且将显示选项卡Stuff的内容。更改标签的链接如下所示< a href =#testgoto =stuff>切换到Tab Stuff< / a> 。
goto的值必须与选项卡< li>< a href =＃stuff> Stuff< / a>< / li>的哈希标记相同; 。下面的函数获取属性'goto'的值将值放入 var whereTo 并执行匹配'a [href]的选择器=＃'+ whereTo +']'

In the demo are 3 tabs plus content. In the first tab-content is a link to the tab 'Stuff'. If you click on this link the tab changes and the content of the tab 'Stuff' will be shown. The link to change the tab looks like this <a href="#test" goto="stuff">switch to Tab Stuff</a>. The value of goto must be the same value as the hash tag of the tab <li><a href="#stuff">Stuff</a></li>. The function below gets the value of the attribute 'goto' puts the value into the var whereTo and executes a click on the selector matching '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选项卡式内容中的锚点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！