Javascript重定向和成功调用功能答案

【问题标题】：Javascript redirect and on success call functionJavascript重定向和成功调用功能
【发布时间】：2018-01-18 08:31:35
【问题描述】：

在我的网页上，我有谷歌地图 (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 Idea 制作这个的方式，点击重定向到 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 对我不起作用，在这种情况下，我不知道如何添加成功。

希望你能理解我的问题

【问题讨论】：

是否到达函数changeState(name)？
你试过document.location.href = http://domein.com/buy.html 吗？
您可以在更改状态函数中尝试window.location.hash = name;
@grumpy 是的，函数 changeState(name) 已执行但未显示大陆
@rach8garg 是的，我尝试，而不是更改我的位置

标签： javascript jquery html redirect

【解决方案1】：

我记得a post I answered few days ago 看起来像你的。您必须使用“哈希更改”处理程序来执行您想要的操作：

在您的菜单中使用此链接：

<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();

【讨论】：

这个添加我的 URL 像这样 domein.com#Africa insed of domein.com/buy.html#Africa
答案已编辑。在buy.html末尾添加脚本，并如上替换链接。
好的，如果我在 buy.html 上可以工作，但如果我在任何其他页面上并点击页脚，这会在 buy.html 上再次重定向我，但在 url 中是 domein.com/buy.html#非洲等
抱歉，您能解释一下您有多少“来自”页面吗？当你点击链接项时他们应该怎么做？
我在所有页面上都有相同的 foter。 Index.html、about.html、product.html 等。在页脚中，我有带有大陆名称的菜单。现在，如果我在这个页面上的任何一个页面上，当我点击大陆名称时我需要有选项，请将我重定向到 buy.html#continentName

【解决方案2】：

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

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");

});

【讨论】：

【解决方案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>

【讨论】：