3

所以，这是目标很简单的事情之一，但毕竟我仍然难过。使用 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>

我很感激任何帮助。

4

3 回答 3

1

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

window.onhashchange = function(evt){
  console.log(evt);
  // Logic for opening tab and navigating to child anchor
}
于 2013-01-06T05:49:58.937 回答
0

最终答案：

  • 在引用目标选项卡的链接上设置“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)
  });
});
于 2013-01-06T22:50:28.567 回答
0

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

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

  1. 您单击用于选择选项卡 selectedIndex 的链接，比方说（Windows 背景 ;-)）
  2. 然后单击您的链接激活该选项卡
  3. 您的选项卡现在已被选中，因此这是您要滚动的位置
  4. 其实滚动...

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

根据jQuery UI API 文档绑定选项卡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通过滚动到您的锚点来处理事件。

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

于 2013-03-01T07:35:16.607 回答