javascript - 链接到关闭的 jquery ui 选项卡中的命名 anchor (drupal)

Question

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

我使用的javascript如下:

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

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>

感谢任何帮助。

Answer 1

您没有绑定(bind)哈希更改事件，因此永远不会调用您更新客户端的函数。

window.onhashchange = function(evt){
  console.log(evt);
  // Logic for opening tab and navigating to child anchor
}