javascript - 根据 URL 变量显示/隐藏 Div

Question

如果单词 email 出现在 URL 中，div id='sociallocker' 应该显示，而 div id ='emaillocker' 应该隐藏。

如果单词 email 不在 URL 中:div id='sociallocker' 应该隐藏，而 div id='emaillocker' 应该显示。

所以:网址包含电子邮件:显示 div:#sociallocker隐藏 div:#emaillocker

URL 不包含电子邮件:显示 div:#emaillocker隐藏 div:#sociallocker

实时链接:https://www.moneynest.co.uk/test-page-for-stack/

使用当前代码，两个 div 都显示了吗？

HTML

<div id="sociallocker">
[sociallocker id="1505"]
</div>


<div id="emaillocker">
[emaillocker]
[/emaillocker]
</div>

JS

<script>
if(document.location.href.indexOf("email") >= 0) {
$("#sociallocker").css(‘display’, ‘none’);
}
</script>

Answer 1

根据我的最佳理解，我已经尝试用假的 URL 字符串模拟您的问题来给您答案。

您有 2 种可能的哈希参数，sociallocker 或 emaillocker，它将按照#sociallocker 或#emaillocker 的方式显示在 URL 中。

当你尝试在核心 javascript 中编写代码时，我也给了你一个核心 javascript 的答案。

例如，我假设您有以下 url 方案。

https://www.moneynest.co.uk/test-page-for-stack/

// When you do in programming uncomment following line.
//var _href = document.location.href;

// When you do in programming comment following line.
var _href= "https://www.moneynest.co.uk/test-page-for-stack/#sociallocker";

var params = _href.split("#")[1];

var divEmailLocker = document.getElementById("emaillocker");
var divSocialLocker = document.getElementById("sociallocker");

if (params.indexOf("sociallocker") > -1) {
  divSocialLocker.style.display = "block";
  divSocialLocker.style.visibility = "visible";
  divEmailLocker.style.display = "none";
  divEmailLocker.style.visibility = "hidden";
}else if (params.indexOf("emaillocker") > -1) {
  divSocialLocker.style.display = "none";
  divSocialLocker.style.visibility = "hidden";
  divEmailLocker.style.display = "block";
  divEmailLocker.style.visibility = "visible";
}

div#sociallocker, div#emaillocker{
  display:none;
}

<div id="sociallocker">
  [sociallocker id="1505"]
</div>


<div id="emaillocker">
  [emaillocker] [/emaillocker]
</div>