2017-05-06 43 views
0

所以,這有點兒尷尬,但我發現一篇文章有​​人解釋了這個問題非常好。但我無法找到它。
所以我在這裏問,是否有可能在JS 的頁面上隱藏所有div(帶ID),讓我們通過鏈接URL顯示一個或多個div。比如說:www.mysite.net/games?id=(_the id of the div_)然後它應該顯示在網站上,而不是其他人。
隱藏所有DIV exept中的一個鏈接調用

有點兒什麼我想是所有div s的隱藏,只顯示由該URL ?id=[id of the div]

回答

0

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

0

不知道如果我有權利問題調用,但是這有點你想要什麼?

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

}); 
+0

不能確定它。因爲在所有的編程的東西我可以給你一個例子讓我說2 div,id 1和id 2我怎麼設置它們?或者是自動的? xD im如此愚蠢 – VitoCraftLP

+0

KInda我想要的是,所有的div都隱藏起來,只顯示那個被url調用的id = [id] – VitoCraftLP