Bootstrap - 更改选项卡

Posted 2023-05-08

【中文标题】Bootstrap - 更改选项卡

【英文标题】：Bootstrap - change tab

【发布时间】：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>？

谢谢，这行得通！

【参考方案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 的答案，因为它似乎适用于锚点和区域，但您的答案解决了我的具体问题。