Question

所以，这有点尴尬，但我发现一个帖子有人解释了这个问题非常好。但我遗憾地找不到它所以我在这里问一下，是否有可能在JS AND 的页面上隐藏所有div（带ID），让我们通过链接URL显示一个或多个div 。让我们说：www.mysite.net/games?id=( _the id of the div_ )它应该出现在网站上，而不是其他任何一个。

有点我想要的是隐藏所有div，只显示由网址?id=[id of the div]调用的<{1}}

Answer 1

不确定我的问题是否正确，但这有点像你想要的吗？

var divs = document.getElementsByTagName("div");

var id = window.location.href.split("=")[1];

divs.map(function(div) {

if(div.id !== id) { div.style['display'] = "none"; }
else { div.style['display'] = "block"; }

});

Answer 2

的sooo。以下是我自己的问题的答案：

HTML：

<div hidden id="1">
  <h1>Hello Manager</h1>
  <p>What would you like to do today?</p>
  <button>View Dashboard</button>
</div>

<div hidden id="2">
  <h1>Hello employee</h1>
  <p>What would you like to do today?</p>
  <button>Clock In</button>
</div>

<div hidden id="3">
  <h1>Hello Owner</h1>
  <p>What would you like to do today?</p>
  <button>Test id</button>
</div>

JavaScript：

// Get query parameter
// Source: https://css-tricks.com/snippets/javascript/get-url-variables/
function getQueryParameter(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1];
    }
  }
  return (false);
}

// Capture the `ID` query parameter from the URL.
var id = getQueryParameter('id')
if(id.toLowerCase() === '1') {
  $('#1').show();
} else if(id.toLowerCase() === '2') {
  $('#2').show();
} else if(id.toLowerCase() === '3') {
  $('#3').show();
}

这是一个有效的例子：http://codepen.io/anon/pen/qmpoKr?id=3

隐藏所有DIV exept在链接中调用的一个

2 个答案: