IE11环境下jQuery实现带锚点滚动的标签页显隐切换失效问题求助

问题根因 #

你当前的实现依赖注释event.preventDefault()触发原生锚点跳转实现滚动，但IE11中锚点跳转的默认行为优先级高于点击事件逻辑，会打断标签切换的DOM操作，导致功能失效。

兼容IE11的修复方案 #

不要依赖原生锚点跳转实现滚动，主动阻止默认行为后手动触发滚动逻辑，可兼容所有浏览器包括IE11，修复后代码如下：

$(document).ready(function() {
  $('.nav-tabs > li > a').click(function(event) {
    // 阻止默认锚点跳转，避免IE11逻辑冲突
    event.preventDefault();
    // 获取当前激活的tab内容选择器
    var active_tab_selector = $('.nav-tabs > li.active > a').attr('href');
    // 移除原有导航的active样式
    var actived_nav = $('.nav-tabs > li.active');
    actived_nav.removeClass('active');
    // 给当前点击的导航添加active样式
    $(this).parents('li').addClass('active');
    // 隐藏原有激活的tab内容
    $(active_tab_selector).removeClass('active');
    $(active_tab_selector).addClass('hide');
    // 显示目标tab内容
    var target_tab_selector = $(this).attr('href');
    $(target_tab_selector).removeClass('hide');
    $(target_tab_selector).addClass('active');
    // 主动滚动到目标内容位置，300是滚动动画时长（单位毫秒），可自行调整
    $('html, body').animate({
      scrollTop: $(target_tab_selector).offset().top
    }, 300);
  });
});

如果不需要滚动动画，想要直接跳转到对应位置，可以把滚动逻辑替换为：

$('html, body').scrollTop($(target_tab_selector).offset().top);

内容的提问来源于stack exchange，提问作者TPur