4

因此，在STVPlus网站上，我们使用 bootstrap 和 tabs 脚本来显示各种电视节目的剧集和文章列表。我遇到一个问题，一旦页面加载（通常）它工作正常，您可以选择一个选项卡并显示相应的 div。但是，如果您选择一个已经处于活动状态的 div，则页面会向下跳。此外，当加载带有 hash 标签的页面时，例如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;
});

剧集 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/

4

3 回答 3

4

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

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

在 Bootstrap 3.2.0 上测试。

我从Twitter Bootstrap 获得了这段代码：如何在单击选项卡时防止跳转。

于 2014-08-19T07:21:17.313 回答
3

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

我不确定你是否需要 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>

演示 (jsfiddle)和哈希演示 (jsfiddle)

于 2012-07-08T20:12:38.623 回答
0

解决此问题的另一种方法是在加载选项卡后调用“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 回答