隐藏链接中所有被调用的DIV

Question

So, it's a bit akward, but I found a post were somebody explained the question very good. But I can not find it sadly.
So I'll ask here, is there a possibility to hide all div (with ID's) on a page with JS AND let show one or more div s via link URL. Let's say like: www.mysite.net/games?id=( _the id of the div_ ) it then should show up on the site and no one of the others.

Kinda what I want is that all div s are hidden and only that shows that is called by the URL ?id=[id of the div]

Answer 1

Not sure if I got the question right, but is this kinda what you want?

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. Here is the answer to my own Question:

The 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>

And the 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();
}

And here is an working example: http://codepen.io/anon/pen/qmpoKr?id=3