Verstecke alle DIV außer einem in einem Link

Question

Also, es ist ein bisschen akward, aber ich fand einen Beitrag, wo jemand die Frage sehr gut erklärte. Aber ich kann es nicht traurig finden.
Also ich werde hier fragen, gibt es eine Möglichkeit, alle div (mit IDs) auf einer Seite mit JS AND verstecken Sie eine oder mehrere div s über Link-URL. Sagen wir mal: www.mysite.net/games?id=(_the id of the div_) sollte dann auf der Site erscheinen und keiner der anderen.

Kinda, was ich will, ist, dass alle div s versteckt sind und nur das zeigt, dass durch die URL aufgerufen wird ?id=[id of the div]

Answer 1

Sooo. Hier ist die Antwort auf meine eigene Frage:

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

Und das 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(); 
} 

Und hier ist ein funktionierendes Beispiel: http://codepen.io/anon/pen/qmpoKr?id=3

Answer 2

nicht sicher, ob ich die Frage richtig verstanden habe, aber das ist ein bisschen was Sie wollen?

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

});