在<a tag click

i am practicing on java script,在<a tag click

i have 3 "a" tags and one div in my page.I want to load different java script file(which is for loading google map) in div on each "a" click, this is my html page

<body> 
<li><a href="#" >india</a></li> 
<li><a href="#" >bangladesh</a></li> 
<li><a href="#" >UAE</a></li> 


<div id="loader"></div>

how can i load different javascript on each "a" click without page refresh

來源

2016-11-09 unknownprogrammer

的Javascript下面小提琴不會刷新頁面。你有什麼嘗試？分享一些實際的代碼。 –

我認爲在這種情況下，不應該加載不同的JavaScript文件來加載不同的地圖，你應該使用單個文件，通過檢查點擊哪個鏈接來加載不同的地圖。 –

javascript文件需要全部加載，並且每個'a'標記點擊將顯示其地圖或其他內容並隱藏另外2個。 –

你好嘗試下面的代碼，希望你把你的地方緯度的數據屬性和經度正在尋找此

jQuery(document).ready(function() { 
    jQuery(document).on("click", ".button", function(e) { 
    e.preventDefault(); 
    var latLng = jQuery(this).attr("data-latLng");   
    initialize(latLng); 
    }); 

    function initialize(latLng) { 
    latLng = latLng.split(",") 
    var mapOptions = { 
     center: new google.maps.LatLng(latLng[0],latLng[1]), 
     zoom: 8 
    }; 
    var map = new google.maps.Map(document.getElementById("map- 
    canvas"), mapOptions); 
    } 
    });

和HTML

<a href="#" class="button" data-latLng="20.593684,78.962880">India</a> 
<a href="#" class="button" data-latLng="23.684994, 
90.356331">Bangladesh</a> 
<a href="#" class="button" data-latLng="23.424076,53.847818">UAE</a>

詳見下文

Div map Load Fiddle

來源

2016-11-09 05:55:08

這正是我想要的，但是我也想添加標記，我可以在哪裏添加它們？ – unknownprogrammer

use gmap3一個div加載JavaScript和像下面

<a href="javascript:void(0)" data-Latitude="22.5773626" data-Longitude="79.5222058">india</a>

然後在你的jQuery側寫這個劇本

$(document).on('click', 'a', function() { 
     var latitude = $(this).attr("data-Latitude"); 
     var longitude = $(this).attr("data-Longitude"); 
     $('#loader').gmap3('destroy'); 
     $('#loader') 
      .gmap3({ 
      center:[latitude , longitude ], 
      zoom:4 
     }) 
     .marker([{position:[latitude , longitude ]}     
     ])  
    });

來源

2016-11-09 05:47:13

你在錯誤的地方回答了 – Mahi

回答

相關問題