Bootstrap - 更改选项卡答案

【问题标题】：Bootstrap - change tabBootstrap - 更改选项卡
【发布时间】：2018-04-22 10:12:05
【问题描述】：

我想从图像映射链接链接到另一个引导选项卡（并更改选项卡）中的项目：这有效，但来自正常链接。 http://jsfiddle.net/k5Lv95L1

我想从图像映射中执行此操作：

<area shape="rect" href="#target" data-tab="#gallery-panel" coords="295,1109,365,1126"/>

但它不起作用。也许我需要更改脚本？

$("a[data-tab]").on('click', function() {
    var tab = $(this).attr('data-tab'),
        target = $(this).attr('href');
    $('ul.nav a[href="' + tab + '"]').tab('show');
    $('html, body').animate({
        scrollTop: $(target).offset().top
    }, 10);    
});

我怎样才能让它工作？

【问题讨论】：

您当前的代码目标是“具有数据选项卡属性的锚链接”。您是否尝试过简单地将其更改为$("[data-tab]")，因为您不再将其关联到<a>，而是关联到<area>？
谢谢，这行得通！

标签： jquery twitter-bootstrap tabs

【解决方案1】：

试试

$("area[data-tab]").on('click', function() {
  var tab = $(this).attr('data-tab'),
    target = $(this).attr('href');
  $('ul.nav area[href="' + tab + '"]').tab('show');
  $('html, body').animate({
    scrollTop: $(target).offset().top
  }, 10);    
});

希望这会对你有所帮助。

【讨论】：

确实，这行得通。我实际上实现了 Robert C 的答案，因为它似乎适用于锚点和区域，但您的答案解决了我的具体问题。