Javascript 引导选项卡未调用JQuery函数_Javascript_Jquery_Bootstrap Modal

Javascript 引导选项卡未调用JQuery函数

javascript jquery

Javascript 引导选项卡未调用JQuery函数,javascript,jquery,bootstrap-modal,Javascript,Jquery,Bootstrap Modal,我尝试过2,3解决方案，但没有一个对我有效我有3个映射，我想在选项卡中显示。只显示第一个。在更改选项卡时，我尝试先调用jQuery函数。但该函数甚至没有启动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xht

我尝试过2,3解决方案，但没有一个对我有效

我有3个映射，我想在选项卡中显示。只显示第一个。在更改选项卡时，我尝试先调用jQuery函数。但该函数甚至没有启动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Google Maps API v3 : KML Layer</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">


    </script>

    <script type="text/javascript">

        $(document).ready(function () {
            //activaTab('overview'); --1.this is not working 
        });

      //2.this is not working 
        //$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        //      alert('not ok');
        //});

      //3.not working    

        //$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
          //  alert(target);
            //var target = $(e.target).attr("href") // activated tab

        //});

        4.Not working
        //function activaTab(tab) {
        //    alert(tab);
        //    $('.tab-pane a[href="#' + tab + '"]').tab('show');

        //};

        function display_kmlmap() {
            var map_options = {};

            //--Nation--
            var mapNation = new google.maps.Map(document.getElementById("map_nation"), map_options);
            var kmlUrlNation = 'http://biogeo.ucdavis.edu/data/gadm2.7/kmz/HTI_adm0.kmz';
            var kmlOptionsNation = { map: mapNation };
            kmlLayerNation = new google.maps.KmlLayer(kmlUrlNation, kmlOptionsNation);
            $("#map_nation").css("width", 400).css("height", 400);



            //--District--
            var mapDistrict = new google.maps.Map(document.getElementById("map_department"), map_options);
            var kmlUrlDistrict = 'http://biogeo.ucdavis.edu/data/gadm2.7/kmz/HTI_adm2.kmz';
            var kmlOptionsDistrict = { map: mapDistrict };
            kmlLayerDistrict = new google.maps.KmlLayer(kmlUrlDistrict, kmlOptionsDistrict);
            $("#map_department").css("width", 400).css("height", 400);


            //--Commune--
            var mapCommune = new google.maps.Map(document.getElementById("map_Commune"), map_options);
            var kmlUrlCommune = 'http://biogeo.ucdavis.edu/data/gadm2.7/kmz/HTI_adm3.kmz';
            var kmlOptionsCommune = { map: mapCommune };
            kmlLayerCommune = new google.maps.KmlLayer(kmlUrlCommune, kmlOptionsCommune);
            $("#map_Commune").css("width", 400).css("height", 400);




        }
    </script>
</head>
<body onload="display_kmlmap()">

    <div>
        <ul class="nav nav-tabs" role="tablist">
            <li class="active"><a href="#overview" role="tab" data-toggle="tab">Nation View</a>
            </li>
            <li><a href="#photos" role="tab" data-toggle="tab">Department View</a>

            </li>

            <li><a href="#Commune" role="tab" data-toggle="tab">Commune View</a>

            </li>
        </ul>




        <!-- Tab panes -->
        <div class="tab-content">
            <div class="tab-pane active" id="overview">
                <div id='map_nation'></div>
            </div>

            <div class="tab-pane" id="photos">
                <div id='map_department'>

                </div>
            </div>

            <div class="tab-pane" id="Commune">
                <div id='map_Commune'>

                </div>
            </div>

        </div>
    </div>
    <div id="map_canvas" style="width: 500px; height: 400px; float: left">
    </div>
</body>
</html>


谷歌地图API v3:KML层
$（文档）.ready（函数（）{
//activaTab（‘概述’）；-1.这不起作用
});
//2.这不起作用
//$（'a[data toggle=“tab”]”）on（'show.bs.tab'，函数（e）{
//警报（“不正常”）；
//});
//3.不工作
//$（'a[data toggle=“tab”]”）on（'show.bs.tab'，函数（e）{
//警报（目标）；
//var target=$（e.target）.attr（“href”）//已激活选项卡
//});
4.不工作
//功能激活选项卡（选项卡）{
//警报（选项卡）；
//$（'.tab窗格a[href=“#'+tab+'''“]'）.tab（'show'）；
//};
功能显示\u kmlmap（）{
var-map_-options={}；
//--国家--
var mapination=new google.maps.Map（document.getElementById（“Map\u nation”）、Map\u选项）；
var Kmlulniation=http://biogeo.ucdavis.edu/data/gadm2.7/kmz/HTI_adm0.kmz';
var kmlOptionsNation={map:mapination}；
KmlayerNation=新的google.maps.Kmlayer（Kmlulnation，kmlOptionsNation）；
$（“地图国家”）.css（“宽度”，400）。css（“高度”，400）；
//--地区--
var mapDistrict=new google.maps.Map（document.getElementById（“地图部门”），地图选项）；
var kmlurldicthttp://biogeo.ucdavis.edu/data/gadm2.7/kmz/HTI_adm2.kmz';
var kmlOptionsDistrict={map:mapDistrict}；
KmlayerDistrict=新的google.maps.Kmlayer（Kmluldirect，kmlOptionsDistrict）；
$（“地图系”）.css（“宽度”，400）。css（“高度”，400）；
//--公社--
var mapcomune=new google.maps.Map（document.getElementById（“Map\u Commune”），Map\u选项）；
var kmlUrlCommunehttp://biogeo.ucdavis.edu/data/gadm2.7/kmz/HTI_adm3.kmz';
var kmloptionscomune={map:mapCommune}；
KmlayerCommune=新的google.maps.Kmlayer（KmlURL通信，kmlOptionsCommune）；
$（“地图社区”）.css（“宽度”，400）。css（“高度”，400）；
}

我尝试了3种解决方案，我在代码中提到过。。但是没有一个在工作…我没有得到任何线索

我遗漏了什么？？？

问题可能是，当创建第二个和第三个贴图时，其他

div

元素被隐藏。为什么我要分配一个函数，在选中选项卡时重新创建贴图…我如何实现它？