Question

在我的网页上我有谷歌地图（buy.html），用户点击任意大陆。如果他点击亚洲我用世界地图隐藏div并显示新地图（带有id="asia"的新div），我的网址现在看起来像buy.html#asia

在页脚中，我有大陆名称的菜单，当用户点击任何大陆的名称时，我需要将他重定向到选定的大陆（buy.html#asia或buy.html#africa或buy.html#australia等）

首先，我尝试只在html中修复所有内容

<a href="buy.html#australia">Australia</a>
<a href="buy.html#asia">Asia</a>
<a href="buy.html#africa">Africa</a>

但是这会将我重定向到buy.html#australia，但不仅向我显示澳大利亚的完整地图

我尝试了第二次，在我的html中我调用了这样的函数

<a href="" onclick="changeState('Australia');">Australia</a>
<a href="" onclick="changeState('Asia');">Asia</a>
<a href="" onclick="changeState('Africa');">Africa</a>

这就是我尝试从.js创建的方法。想法是，点击重定向到buy.html，成功调用新函数show_country(name)。当我点击地图时这个功能正常工作，所以我觉得代码在这里没有必要。如果有人需要查看此功能的代码，我将在此处发布

function changeState(name){
document.location.href = "domein.com/buy.html";
//i'm stuck here, how to add success and call this function on success 
show_country(name)
};

这里document.location.href对我不起作用，我不知道如何在这种情况下增加成功。

我希望你理解我的问题

Answer 1

我记得a post I answered few days ago看起来像你的。你必须使用＆＃34;哈希变化＆＃34;处理程序做你想做的事：

在菜单中使用此链接：

<a href="buy.html#australia">Australia</a>
<a href="buy.html#asia">Asia</a>
<a href="buy.html#africa">Africa</a>

并在buy.html页面的末尾添加此脚本：

function locationHashChanged() {
     if (location.hash.startsWith("#")) {
        show_country(decodeURI(location.hash).substring(1));
     }
}

//bind handler for next clicks
window.onhashchange = locationHashChanged;

//on page load call to init the right view
locationHashChanged();

Answer 2

您可以尝试使用第一个方法和脚本，还可以为所有地图div添加公共类“map”。

HTML代码：

<a href="buy.html#australia">Australia</a>
<a href="buy.html#asia">Asia</a>
<a href="buy.html#africa">Africa</a>

脚本：

<script>
$(function () {
var url      = window.location.href;     // Returns full URL
var res = url.split("#");
var id = res[1];
$(".map").css("display", "none");
$("#"+id).css("display", "block");

});

Answer 3

您可以使用HTML书签来实现它。 HTML书签用于允许读者跳转到网页的特定部分。在你的情况下它显示地图。

window.onload = function(){
    let activeMap = Boolean(document.location.hash) ? document.location.hash : "#Asia";
	console.log(activeMap);
    document.querySelector(activeMap).style.display = "block";
}

function changeState(name){
    console.log("I am in", name);
    let maps = document.querySelectorAll(".map");
    for(let i=0; i < maps.length; i++){
        maps[i].style.display = 'none';
    }
    document.querySelector("#"+name).style.display = "block";
}

.map{display: none};

<div id="Australia" class="map">Australia</div>

<div id="Africa" class="map">Africa</div>

<div id="Asia" class="map">Asia</div>


<a href="#Australia" onclick="changeState('Australia');">Australia</a> |
<a href="#Africa" onclick="changeState('Africa');">Africa</a> |
<a href="#Asia" onclick="changeState('Asia');">Asia</a>

Javascript重定向和成功调用函数

3 个答案: