Question

所以在网站STVPlus上我们使用bootstrap和tabs脚本来显示各种电视节目的剧集和文章列表。我有一个问题，一旦页面加载（通常）它工作正常，你可以选择一个选项卡，相应的div将显示。但是，如果您选择一个已经激活的div，则页面会向下跳转。当使用类似episodes hash tag link的哈希标记加载页面时，它会在页面完全加载时自动跳转。我尝试使用chrome dev工具逐步完成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>

我使用最新的jquery，http://benalman.com/projects/jquery-hashchange-plugin/

Answer 1

@Sherbrow的答案对我不起作用。但是，下面的代码做了：

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

在Bootstrap 3.2.0上测试。

我从Twitter Bootstrap: How To Prevent Jump When Tabs Are Clicked获得了此代码。

Answer 2

这是我对你的问题的处理方法：

我不确定你是否需要hashchange插件 - 除了一些document.location.hash后备（如果有的话）。

以下代码使用经典引导选项卡，手动激活以及一些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>

Demo (jsfiddle)和Hash demo (jsfiddle)

Answer 3

解决此问题的另一种方法是调用＆＃39; scrollTop＆＃39;加载选项卡后。我是这样做的：

$("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);
});

单击选项卡一旦激活，页面就会跳转

3 个答案: