Question

所以，这是目标很简单的事情之一，但是在一整天之后我仍然难倒。使用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>

我感谢任何帮助。

Answer 1

您没有绑定散列更改事件，因此永远不会调用更新客户端的函数。

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

Answer 2

最终答案：

在引用目标选项卡的链接上设置“goto”属性。
确保目标元素的id设置为与锚点匹配。这不会与目标元素或链接上的“名称”属性一起使用。

代码：

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)
  });
});

Answer 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事件。

如果没有对您的要求进行更深入的分析，我的快速理解中没有经过测试的代码。我希望我能正确理解。否则，请告诉我。

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

3 个答案: