在浏览器刷新时保留隐藏的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

回答

相关问题