Javascript 在浏览器刷新时保持隐藏的div id_Javascript_Jquery_Css

Javascript 在浏览器刷新时保持隐藏的div id

javascript jquery css

Javascript 在浏览器刷新时保持隐藏的div id,javascript,jquery,css,Javascript,Jquery,Css,我将div设置为100%高度，并使用css和jquery组合显示和隐藏它们在我进入index.html#panel（x）并刷新浏览器之前，所有这些都可以正常工作。然后，它会转换回混乱的滚动功能问题的关键在于：有没有更好的方法来解决这个问题？看起来我所要做的只是显示和隐藏div，但我需要能够刷新index.html#panel（x）并使其无缝工作请让大家知道我不是jquery或javascript专家，所以当你批评我有多笨的时候，请友善一点我已经花了太多的不眠之夜试图得到这个功能的权利，需

我将div设置为100%高度，并使用css和jquery组合显示和隐藏它们

在我进入index.html#panel（x）并刷新浏览器之前，所有这些都可以正常工作。然后，它会转换回混乱的滚动功能

问题的关键在于：有没有更好的方法来解决这个问题？看起来我所要做的只是显示和隐藏div，但我需要能够刷新index.html#panel（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>


无标题文件
html，正文{
身高：100%；
保证金：0；
填充：0；
}
.导航{
位置：固定；
排名：0；
左：0；
z指数：100；
}
.货柜码头{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
#小组1、小组2、小组3、小组4、家庭{
最大宽度：680px；
身高：100%；
保证金：自动；
}
#配电盘1、配电盘2、配电盘3、配电盘4{
显示：无；
}
#专题小组1：目标{
显示：块；
}
#专题小组2：目标{
显示：块；
}
#专题小组3：目标{
显示：块；
}
#专题小组4：目标{
显示：块；
}
$（文档）.ready（函数（）{
$（“.toggle”）。单击（函数（）{
$（“#home”）.hide（）；
});
});






明尼阿波利斯
明尼阿波利斯
拉拉
圣保罗
旧金山

最简单、最跨浏览器的解决方案越好，提前感谢

问题在于，当您使用散列

#panel4

启动页面时，它不会调用

。单击（）

事件，也不会隐藏您的

#home

div

您必须检查url中是否有哈希，并删除document ready上的

#home

div：

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

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

如果面板值处存在相应的哈希值，请参见“在文档准备就绪时检查”：

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

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

您可以这样做：

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


无标题文件
html，正文{
身高：100%；
保证金：0；
填充：0；
}
.导航{
位置：固定；
排名：0；
左：0；
z指数：100；
}
.货柜码头{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
#配电盘1、配电盘2、配电盘3、配电盘4{
最大宽度：680px；
身高：100%；
保证金：自动；
}
#配电盘2、配电盘3、配电盘4{
显示：无；
}
#专题小组1：目标{
显示：块；
}
#专题小组2：目标{
显示：块；
}
#专题小组3：目标{
显示：块；
}
#专题小组4：目标{
显示：块；
}
$（文档）.ready（函数（）{
var clean_hash=window.location.hash.substr（1）；
if（clean_hash&&clean_hash！='panel1'）{
$（'#panel1'）.hide（）；
$（'#'+clean_hash）.show（）；
}
});






明尼阿波利斯
拉拉
圣保罗
旧金山

我已删除#home并检测是否存在哈希以显示panel

panel1和home相同的内容？不要像在家一样使用panel1。nanndoj这很好用！你能给我解释一下为什么它有效吗？为什么index.html#panel4不继续显示：没有css中的面板？benjamin，我之所以有重复的home和panel1是为了能够在页面加载时显示第一个面板。对于您的更新，它似乎在自身内部工作，但是当您只转到index.html时，第一页不会显示。我也很想尝试您的解决方案，因为它看起来非常有希望。谢谢大家的帮助！您是否看到此更改

#panel2、#panel3、#panel4{display:none；}

？默认情况下，显示panel1