Twitter bootstrap 3 区域映射到引导选项卡不工作

我有一个引导标签，工作得很好。 我有一个区域地图，如果它没有插入到选项卡中，它工作得很好。 我使用Matt Stow的响应图像映射jQuery插件，也可以正常工作

症状： 然后我将区域地图放入其中一个选项卡中，默认情况下，该选项卡不处于活动状态。 然后我单击选项卡使其显示。因此，img得到了很好的显示。 但是区域地图不起作用。我看不到可点击的矩形。 但是如果我手动调整导航器的大小，那么区域地图就可以工作了

页面： 选择选项卡“选择指南”，白色矩形应可单击。直到我手动调整窗口的大小，它们才会显示

原因： 负责的是响应图像映射jQuery插件。在其代码中，它调用jquery.width（）方法以获取映射应该工作的img的宽度。由于父项（选项卡）是隐藏的，因此返回的宽度是错误的。它用它来调整地图的大小。。。价值观不好。那张地图太小了，似乎不起作用

---

感谢您的帮助。

一个解决方案是在调用width（）之前使祖先可见，从而修改响应图像映射jQuery插件

原始代码：

/*
* rwdImageMaps jQuery plugin v1.6
*
* Allows image maps to be used in a responsive design by     recalculating the area coordinates to match the actual image size on load and window.resize
*
* Copyright (c) 2016 Matt Stow
* https://github.com/stowball/jQuery-rwdImageMaps
* http://mattstow.com
* Licensed under the MIT license
*/
;(function($) {
$.fn.rwdImageMaps = function() {
    var $img = this;

    var rwdImageMap = function() {
        $img.each(function() {
            if (typeof($(this).attr('usemap')) == 'undefined')
                return;

            var that = this,
                $that = $(that);

            // Since WebKit doesn't know the height until after the image has loaded, perform everything in an onload copy
            $('<img />').on('load', function() {
                var attrW = 'width',
                    attrH = 'height',
                    w = $that.attr(attrW),
                    h = $that.attr(attrH);

                if (!w || !h) {
                    var temp = new Image();
                    temp.src = $that.attr('src');
                    if (!w)
                        w = temp.width;
                    if (!h)
                        h = temp.height;
                }

                var wPercent = $that.width()/100,
                    hPercent = $that.height()/100,
                    map = $that.attr('usemap').replace('#', ''),
                    c = 'coords';

                $('map[name="' + map + '"]').find('area').each(function() {
                    var $this = $(this);
                    if (!$this.data(c))
                        $this.data(c, $this.attr(c));

                    var coords = $this.data(c).split(','),
                        coordsPercent = new Array(coords.length);

                    for (var i = 0; i < coordsPercent.length; ++i) {
                        if (i % 2 === 0)
                            coordsPercent[i] = parseInt(((coords[i]/w)*100)*wPercent);
                        else
                            coordsPercent[i] = parseInt(((coords[i]/h)*100)*hPercent);
                    }
                    $this.attr(c, coordsPercent.toString());
                });
            }).attr('src', $that.attr('src'));
        });
    };
    $(window).resize(rwdImageMap).trigger('resize');

    return this;
};
})(jQuery);

/*
*rwdImageMaps jQuery插件v1.6
*
*通过重新计算面积坐标以匹配加载和window.resize时的实际图像大小，允许在响应设计中使用图像贴图
*
*版权所有（c）2016马特·斯托
* https://github.com/stowball/jQuery-rwdImageMaps
* http://mattstow.com
*根据麻省理工学院许可证获得许可
*/
;（函数（$）{
$.fn.rwdImageMaps=函数（）{
var$img=此；
var rwdimageap=函数（）{
$img.每个（函数（）{
if（typeof（$（this）.attr（'usemap'））=='undefined'）
返回；
var=这个，
$that=$（that）；
//因为WebKit直到图像加载后才知道高度，所以在加载副本中执行所有操作
$('
修改后的代码：

/*
* rwdImageMaps jQuery plugin v1.6
*
* Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize
*
* Copyright (c) 2016 Matt Stow
* https://github.com/stowball/jQuery-rwdImageMaps
* http://mattstow.com
* Licensed under the MIT license
*/
;(function($) {
$.fn.rwdImageMaps = function() {
    var $img = this;

    var rwdImageMap = function() {

        $img.each(function() {
            if (typeof($(this).attr('usemap')) == 'undefined')
                return;

            var that = this,
                $that = $(that);

                // Since WebKit doesn't know the height until after the image has loaded, perform everything in an onload copy
            $('<img />').on('load', function() {

                // Modif BC : make ancestors visible so .width() can return the right value
                //************************************************
                var hidden_ancestors = [];
                $that.parents().each(function() {
                    if ($(this).css('display') == 'none')
                    {

                $(this).show();
                        hidden_ancestors.push($(this));
                    };
                });
                // END Modif BC

                var attrW = 'width',
                    attrH = 'height',
                    w = $that.attr(attrW),
                    h = $that.attr(attrH);

                if (!w || !h) {
                    var temp = new Image();
                    temp.src = $that.attr('src');
                    if (!w)
                        w = temp.width;
                    if (!h)
                        h = temp.height;
                }

                var wPercent = $that.width()/100,
                    hPercent = $that.height()/100,
                    map = $that.attr('usemap').replace('#', ''),
                    c = 'coords';

                $('map[name="' + map + '"]').find('area').each(function() {
                    var $this = $(this);
                    if (!$this.data(c))
                        $this.data(c, $this.attr(c));

                    var coords = $this.data(c).split(','),
                        coordsPercent = new Array(coords.length);

                    for (var i = 0; i < coordsPercent.length; ++i) {
                        if (i % 2 === 0)
                            coordsPercent[i] = parseInt(((coords[i]/w)*100)*wPercent);
                        else
                            coordsPercent[i] = parseInt(((coords[i]/h)*100)*hPercent);
                    }
                    $this.attr(c, coordsPercent.toString());
                });


                // Modif BC : Restore invisibility on ancestors
                //*********************************************
                jQuery.each(hidden_ancestors, function(index, value)
                {
                    $(value).css({display: ''});
                });
                // END Modif BC

            }).attr('src', $that.attr('src'));
        });
    };
    $(window).resize(rwdImageMap).trigger('resize');

    return this;
};
})(jQuery);

/*
*rwdImageMaps jQuery插件v1.6
*
*通过重新计算面积坐标以匹配加载和window.resize时的实际图像大小，允许在响应设计中使用图像贴图
*
*版权所有（c）2016马特·斯托
* https://github.com/stowball/jQuery-rwdImageMaps
* http://mattstow.com
*根据麻省理工学院许可证获得许可
*/
；（函数（$）{
$.fn.rwdImageMaps=函数（）{
var$img=此；
var rwdimageap=函数（）{
$img.每个（函数（）{
if（typeof（$（this）.attr（'usemap'））=='undefined'）
返回；
var=这个，
$that=$（that）；
//因为WebKit直到图像加载后才知道高度，所以在加载副本中执行所有操作
$('
我将向马特·斯托（Matt Stow）推荐这一改进，作者
的作品很有魅力！非常感谢布鲁诺！