javascript - tab 被点击后页面跳转

Question

所以在网站上STVPlus我们使用 bootstrap 和 tabs 脚本来显示各种电视节目的剧集和文章列表。我有一个问题，一旦页面加载(通常)它工作正常，您可以选择一个选项卡，适当的 div 将显示。但是，如果您选择一个已经处于事件状态的 div，页面会跳转。此外，当加载带有像这样的哈希标签的页面时 episodes hash tag link ，然后当页面完全加载时它会自动跳转。我尝试使用 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;
});

episode 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 得到了这段代码.