链接到关闭的 jquery ui 选项卡中的命名锚点（drupal）答案

【问题标题】：Linking to a named anchor in a closed jquery ui tab (drupal)链接到关闭的 jquery ui 选项卡中的命名锚点（drupal）
【发布时间】：2013-01-06 05:34:39
【问题描述】：

所以，这是其中目标很简单的事情之一，但一整天后我仍然感到难过。使用 drupal，我正在尝试链接到 jquery ui 选项卡内的命名锚点。我能找到的最有希望的东西在这里：Link to an anchor within JQuery tabbed content，但我无法让它工作。历史记录已开启，我正在使用链接中的“goto”参数。

我使用的javascript如下：

已更新，下面是新的 jquery。我现在在单击链接时导航到相应的选项卡，但是页面停留在同一位置而不是滚动到锚点

jQuery(document).ready(function($) {

$('a[goto]').click(function(evt) {
evt.preventDefault();
var whereTo = $(this).attr('goto');
$tabs = $("ul.ui-tabs-nav li");
$tabs.find('a[href=#' + whereTo + ']').trigger('click');
//alert(attr('name'));
//alert( $('#'+whereTo+' a').offset().top );
$('html, body').animate({
    scrollTop: $('#'+whereTo+' a').offset().top
});

});


});

相关的html结构为：

<div id="quicktabs-event" class="quicktabs-ui-wrapper qt-ui-tabs-processed-processed     ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top">
<li class="ui-state-default ui-corner-top">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active ui-state-focus">
<a href="#qt-event-ui-tabs3" tabindex="2">Classes</a>
</li>
<li class="ui-state-default ui-corner-top">
<::after>
</ul>
<div id="qt-event-ui-tabs1" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
<div id="qt-event-ui-tabs2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
<div id="qt-event-ui-tabs3" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
<div id="qt-event-ui-tabs4" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
</div>
</div> 
<::after>
</div>
</div>

感谢您的帮助。

【问题讨论】：

对于初学者来说，您的
标签似乎没有正确关闭。

jQuery(document).ready(function ($) { var $tabs = $("ul.ui-tabs-nav li"); $('a[goto]').click(function (evt) { evt.preventDefault(); var whereTo = $(this).attr('goto'); var anchor = this.hash; $tabs.find('a[href=#' + whereTo + ']').trigger('click'); setTimeout(function(){ $('html,body').animate({ scrollTop: $(anchor).offset().top }, 500); }, 250) }); });

【解决方案3】：

问题是当标签实际被激活时如何向下滚动到锚点。

有一个事件tabsactivate，您可以在该事件上绑定一个事件侦听器，以便让您知道您实际上是在活动选项卡上，并且所有内容都可以滚动。

您单击用于选择标签 selectedIndex 的链接，比方说（Windows 背景；-)）
点击您的链接后，该选项卡就会激活
您的标签现在已被选中，所以这是您要滚动的地方
实际上滚动...

从我的脑海中，我猜是这样的：

根据jQuery UI API Documentation在标签tabsactivate事件监听器上绑定

$( ".selector" ).on( "tabsactivate", function( event, ui ) {
    // This is here you want to scroll to your anchor.
});

要订阅链接点击事件以便更改选项卡 selectedIndex，您可以执行以下操作，我觉得这很容易。

$(".linkSelector").click(function( event, ui ) {
    $(".tabSelector").tabs( 'option', 'active', selectedIndex);
    return false; // actually preventing default behaviour.
});

其中 selectedIndex 变量的值应随您要选择滚动的选项卡而变化。

首先，处理您要更改所选选项卡的点击事件。

其次，通过滚动到锚点来处理tabsactivate 事件。

在没有深入分析您的需求的情况下，这不是我快速理解的经过测试的代码。我希望我理解正确。否则，请告诉我。

【讨论】：