3

ですから、これは目標が十分に単純なものの 1 つですが、1 日を終えてもまだ困惑しています。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>

助けていただければ幸いです。

4

3 に答える 3

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 に答える