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

问题描述

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

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

我有 在Stuff"选项卡中的标题Anchor"旁边.

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

默认情况下，第一个选项卡被选中，但如果有人点击链接<a href="#test">Go to anchor</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.

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

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

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

演示

在演示中有 3 个标签和内容.在第一个选项卡内容中，是指向Stuff"选项卡的链接.如果您单击此链接，选项卡会发生变化，并且将显示Stuff"选项卡的内容.更改选项卡的链接如下所示 <a href="#test";goto=stuff">切换到Tab Stuff</a>.goto 的值必须与标签

Stuff

的哈希标签的值相同.下面的函数获取属性 '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屋！