在瀏覽器刷新時保留隱藏的div ID

我將div設置爲100％的高度，並讓它們顯示和隱藏CSS和jQuery的組合。在瀏覽器刷新時保留隱藏的div ID

所有工作完美，直到我在index.html＃面板（x）並刷新我的瀏覽器。然後它轉換回凌亂的滾動功能。

以下是關鍵：有沒有更好的方法來設置它？似乎所有我試圖做的是顯示和隱藏div，但我需要能夠刷新index.html＃面板（x）並使其無縫工作。

請讓我們知道，我不是一個jquery或JavaScript的專家，所以請當仁慈，當你支持我是多麼愚蠢。

我花了太多不眠之夜試圖讓這個功能正確，需要一些幫助。這裏是代碼：

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Untitled Document</title> 
<style type="text/css"> 

html, body { 
height:100%; 
margin:0; 
padding:0; 

} 

.nav { 
position: fixed; 
top: 0; 
left:0; 
z-index:100; 

} 

.container_main { 
position: absolute; 
top: 0; 
left:0; 
width: 100%; 
height: 100%; 
} 

#panel1, #panel2, #panel3, #panel4, #home { 
max-width: 680px; 
height: 100%; 
margin:auto; 
} 

#panel1, #panel2, #panel3, #panel4 { 
display:none; 
} 

#panel1:target{ 
display:block; 
} 

#panel2:target{ 
display:block; 
} 

#panel3:target{ 
display:block; 
} 

#panel4:target{ 
display:block; 
} 


</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
$(".toggle").click(function(){ 
    $("#home").hide(); 
}); 
}); 
</script> 
</head> 

<body> 

<div class="nav"> 
<a class="toggle" href="#panel1">Panel1</a><br> 
<a class="toggle" href="#panel2">Panel2</a><br> 
<a class="toggle" href="#panel3">Panel3</a><br> 
<a class="toggle" href="#panel4">Panel4</a> 
</div> 

<div class="container_main"> 
<div id="home" style="background-color:#678993;">Minneapolis</div> 
<div id="panel1" style="background-color:#678993;">Minneapolis</div> 
<div id="panel2" style="background-color:#cccccc;">LALA</div> 
<div id="panel3" style="background-color:#aaaaaa;">St Paul</div> 
<div id="panel4" style="background-color:#DB62A1;">SF</div> 
</div> 

</body> 
</html>

更簡單，最跨瀏覽器的解決方案更好，在此先感謝！

來源

2015-02-24 jespsf

panel1和home的內容相同嗎？不要使用panel1像家一樣。 – 2015-02-24 16:06:25

問題是當你用散列開始你的頁面#panel4它不會調用.click()事件並且不會隱藏你的#home div。

你必須檢查是否有在您的網址哈希和刪除文件準備好#home格：

$(document).ready(function(){ 
    $(".toggle").click(function(){ 
     $("#home").hide(); 
    }); 

    if(window.location.hash) { 
     // Fragment exists 
     $("#home").hide(); 
    } 
});

見Window Location hash

來源

2015-02-24 16:06:39 nanndoj

再次感謝您的幫助 – jespsf 2015-02-24 19:32:32

檢查在文檔準備，如果對應的面板值現有哈希：

$(function() { 
    var hash = location.hash.substr(1); 
    if($.inArray(hash, [ "panel1", "panel2", "panelx" ])) { 
     $("#home").hide(); 
    } 

    $(".toggle").on('click', function(){ 
     $("#home").hide(); 
    }); 
});

來源

2015-02-24 16:08:13

你可以這樣做：

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Untitled Document</title> 
<style type="text/css"> 

html, body { 
height:100%; 
margin:0; 
padding:0; 

} 

.nav { 
position: fixed; 
top: 0; 
left:0; 
z-index:100; 

} 

.container_main { 
position: absolute; 
top: 0; 
left:0; 
width: 100%; 
height: 100%; 
} 

#panel1, #panel2, #panel3, #panel4 { 
max-width: 680px; 
height: 100%; 
margin:auto; 
} 

#panel2, #panel3, #panel4 { 
display:none; 
} 

#panel1:target{ 
display:block; 
} 

#panel2:target{ 
display:block; 
} 

#panel3:target{ 
display:block; 
} 

#panel4:target{ 
display:block; 
} 


</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    var clean_hash = window.location.hash.substr(1); 
    if(clean_hash && clean_hash!='panel1'){ 
     $('#panel1').hide(); 
     $('#'+clean_hash).show(); 
    } 
}); 
</script> 
</head> 

<body> 

<div class="nav"> 
<a class="toggle" href="#panel1">Panel1</a><br> 
<a class="toggle" href="#panel2">Panel2</a><br> 
<a class="toggle" href="#panel3">Panel3</a><br> 
<a class="toggle" href="#panel4">Panel4</a> 
</div> 

<div class="container_main"> 
<div id="panel1" style="background-color:#678993;">Minneapolis</div> 
<div id="panel2" style="background-color:#cccccc;">LALA</div> 
<div id="panel3" style="background-color:#aaaaaa;">St Paul</div> 
<div id="panel4" style="background-color:#DB62A1;">SF</div> 
</div> 

</body> 
</html>

我已刪除#home並檢測散列是否存在以顯示面板

來源

2015-02-24 16:12:33

nanndoj此作品完美！你能向我解釋爲什麼它起作用嗎？爲什麼不會index.html＃panel4只是繼續顯示：沒有在CSS面板？ – jespsf 2015-02-24 17:00:51

本傑明，我有重複的家和panel1的原因是能夠顯示頁面加載第一個面板。隨着你的更新，它似乎在其內部工作，但第一頁不顯示你什麼時候只是去index.html id真的想嘗試你的解決方案，因爲它看起來非常有前途。感謝您的幫助！ – jespsf 2015-02-24 17:03:21

你有沒有看到這個改變＃＃panel2，＃panel3，＃panel4 {display：none;}'？默認情況下，panel1是show – 2015-02-25 08:39:09

在瀏覽器刷新時保留隱藏的div ID

回答

相關問題