4

そのため、サイトSTVPlusでは、ブートストラップとタブスクリプトを使用して、さまざまなテレビ番組のエピソードと記事のリストを表示しています。ページが読み込まれると（通常は）正常に機能するという問題があります。タブを選択すると、適切なdivが表示されます。ただし、すでにアクティブなdivを選択すると、ページがジャンプダウンします。また、エピソードのハッシュタグリンクのようなハッシュタグを使用してページをロードすると、ページが完全にロードされると自動的にジャンプダウンします。Chrome開発ツールを使用してJSコードをステップ実行しようとしましたが、明らかなものは見つかりませんでした。

どんな助けでもいただければ幸いです。

サンプルコード：

$(function()
{
    $('.sidebar').jScrollPane();

  // Bind an event to window.onhashchange that, when the hash changes, gets the
  // hash and adds the class "selected" to any matching nav link.
  $(window).hashchange( function(){
    var hash = location.hash;


    if ( hash == '#episodes'){
        //e.preventDefault();
        $('.nav-pills a:last').tab('show');
    }else{
        //e.preventDefault();
        $('.nav-pills a:first').tab('show');
    }

  })

  // Since the event is only triggered when the hash changes, we need to trigger
  // the event now, to handle the hash the page may have loaded with.
  $(window).hashchange();
  return false;
});

エピソードのdivコンテナはそのようなものです

<div class="tab-pane" id="episodes">    ..... </div>

クリックしたタブはそのようなものです

<ul class="nav nav-pills pull-right" data-tabs="tabs">
   <li class="active"><a href="<?php echo current_url(); ?>#articles">Latest Articles</a></li>
   <li><a href="<?php echo current_url(); ?>#episodes">Upcoming Episodes</a></li>
   </ul>

http://benalman.com/projects/jquery-hashchange-plugin/で最新のjqueryを使用しています

4

3 に答える 3

4

@Sherbrowからの回答は私にはうまくいきませんでした。しかし、次のコードはそうしました：

$('.nav-tabs li a').click( function(e) {
    history.pushState( null, null, $(this).attr('href') );
});

Bootstrap3.2.0でテスト済み。

Twitter Bootstrapからこのコードを入手しました：タブがクリックされたときにジャンプを防ぐ方法。

于 2014-08-19T07:21:17.313 に答える
3

これはあなたの問題に関する私のアプローチです：

document.location.hashいくつかのフォールバック（ある場合）を除いて、hashchangeプラグインが必要かどうかはわかりません。

次のコードは、手動でアクティブ化された従来のブートストラップタブとonready、ハッシュに一致するタブを表示するコードを使用しています。

var hasHash = false;
var hash = document.location.hash;
if(hash) {
    hasHash = true;
    var $toggleTab = $('a[href='+hash+']');
    if($toggleTab.length) $toggleTab.tab('show');
}

タブのアクティブ化：

$('.nav > li > a').click(function(event) {
    event.stopPropagation();
    var $this = $(this);
    $this.tab('show');
    if(hasHash) document.location.hash = $this.attr('href');
});

HTMLに基づく：

<ul class="nav nav-pills" data-tabs="tabs">
    <li class="active"><a href="#articles" data-target="#articles-tab">Latest Articles</a></li>
    <li><a href="#episodes" data-target="#episodes-tab">Upcoming Episodes</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane" id="episodes-tab">episodes</div>
    <div class="tab-pane active" id="articles-tab">articles</div>
</div>

デモ（jsfiddle）とハッシュデモ（jsfiddle）

于 2012-07-08T20:12:38.623 に答える
0

これを解決するもう1つの方法は、タブがロードされた後に「scrollTop」を呼び出すことです。私はそれをこのようにします：

$("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
    var id = $(e.target).attr("href").substr(1);
    window.location.hash = id;
    setTimeout(function () { $("body").scrollTop(0); }, 50);
});
于 2016-04-23T02:31:40.477 に答える