单击选项卡时，页面会在活动后向下跳转

Page jumps down when tab is clicked once active

本文关键字：活动 选项 单击      更新时间：2023-09-26

因此，在网站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>

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

@Sherbrow的答案对我不起作用。但是，以下代码确实如此：

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

在引导程序 3.2.0 上测试。

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

这是我对您的问题的方法：

我不确定您是否需要哈希更改插件 - 除了一些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）

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

> 2022 答案
我发现如果你加上preventDefault和stopPropagation，那么它就不会移动或跳跃。

因此，无论您在哪里添加事件侦听器代码...

$(document).on("click", "#icons-tab-2", (event) => {
  event.stopPropagation();
  //insert whatever code you want in here
  //typically I have had to add code to adjust the tab content containers
  event.preventDefault();
});

但是您不需要处理其他答案中提到的哈希值或滚动顶部。

相关文章：