Question

我将div设置为100％高度，并使用css和jquery的组合显示和隐藏。

一切正常，直到我在index.html＃panel（x）上并刷新我的浏览器。然后它转换回凌乱的滚动功能。

这里有关键：有没有更好的方法来解决这个问题？似乎所有我想要做的就是显示和隐藏div，但我需要能够刷新index.html＃panel（x）并让它们无缝地工作。

请让我知道我不是一个jquery或javascript savant，所以当你惩罚我多么愚蠢时，请善待。

我花了太多不眠之夜试图让这项功能正确并需要一些帮助。这是代码：

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

更简单，最跨浏览的解决方案越好，提前致谢！

Answer 1

问题是当您使用哈希#panel4启动页面时，它不会调用.click()事件，也不会隐藏您的#home div。

您必须检查网址中是否有哈希并删除文档就绪的#home div：

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

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

请参阅Window Location hash

Answer 2

检查文档是否准备好，如果面板值对应的现有哈希：

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

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

Answer 3

你可以这样做：

<!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并检测是否存在显示面板的哈希

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

3 个答案: