链接到一个封闭的jquery ui选项卡中的命名锚(drupal)

Linking to a named anchor in a closed jquery ui tab (drupal)

本文关键字：选项 drupal ui jquery 一个 链接      更新时间：2023-09-26

所以，这是那些目标足够简单的事情之一，但一整天之后我仍然被难住了。使用drupal，我试图链接到jquery ui选项卡内的命名锚。我能找到的最有希望的东西在这里:链接到JQuery选项卡内容中的锚，但我还没能让它工作。历史记录是打开的，我在链接中使用了"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>

谢谢你的帮助。

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

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

最终答案:

  • 在你的链接上设置一个"goto"属性来引用目标标签。
  • 确保目标元素有一个与锚匹配的id。这对目标元素或链接上的" name "属性不起作用。
代码:

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

问题是，当选项卡实际激活时，如何向下滚动到锚。

有一个事件tabsactivate，你可以绑定一个事件监听器，以便让你知道你实际上是在活动选项卡上，所有保持滚动。

  1. 你点击链接选择标签selecteindex，比如(Windows背景;-))
  2. 选项卡在点击链接
    3. 时激活
  3. 你的标签现在被选中，所以这是你想要滚动
    4. 的地方
  4. 实际滚动…

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

根据jQuery UI API文档

绑定选项卡tabsactivate事件监听器
$( ".selector" ).on( "tabsactivate", function( event, ui ) {
    // This is here you want to scroll to your anchor.
});

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

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

其中selectedIndex变量的值将随着您想要滚动的选项卡的选择而改变。

首先，处理你的click事件，这是你想要改变所选选项卡的地方。

第二，处理tabsactivate事件，滚动到你的锚。

这是没有经过测试的代码，从我的快速理解，没有深入分析您的需求。我希望我没理解错。否则，请告诉我。

相关文章：