我有一个侧边菜单,其中每个内容的链接都基于隐藏和显示div过程。但是当我使用后退按钮时,未显示下一个div的内容。我怎样才能实现这一目标?我已经阅读了jquery pushstate,但我仍然感到困惑。请帮忙。
到目前为止我对代码的洞察力:
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" > < /script>
$(function() {
var curPage="";
$("#toggle a").click(function() {
if (curPage.length) {
$("#"+curPage).hide();
}
curPage=$(this).data("page");
$("#"+curPage).show();
});
});
.content {
display: none;
}
<div id="container">
<div id="canvas">
<div id="nav">
<ul id="toggle">
<li><a href="/home" data-page="page1">HOME</a>
</li>
<li><a href="#us" data-page="page2">ABOUT US</a>
</li>
<li><a href="#end" data-page="page3">PORTFOLIO</a>
</li>
<li><a href="#">CONTACT</a>
</li>
</ul>
</div>
<a href="#" class="toggle-nav" id="bars"><i class="fa fa-bars"></i></a>
<div id="main">
<div id="page1" class="content">TEST ONE</div>
<div id="page2" class="content">TEST TWO</div>
<div id="page3" class="content">TEST THREE</div>
</div>
</div>
答案 0 :(得分:1)
这样做的一种方法是设置位置的哈希值并添加setInterval()
以跟踪该哈希值的变化。
您需要稍微更改链接:
<li><a href="#page2">ABOUT US</a></li>
单击该链接除了设置URL的哈希值外什么都不做。
这里是javascript(不再需要你的了):
$(function() {
window.setInterval(function() {
if(document.location.hash !== '') {
$('.content').hide();
$(document.location.hash).show();
}
}, 50);
});
每50毫秒,将检查哈希值,如果它不为空,则该值将用于显示相应的元素。
答案 1 :(得分:0)
如果您可以使用href作为页面ID,那么代码将变得更加容易。您可以避免所有额外的代码。
因此菜单看起来像
<li>
<a href="#about-us">ABOUT US</a>
</li>
无需使用data-page="page2"
应使用菜单的href id修改页面div。像
<div id="about-us" class="content">TEST ONE</div>
这简单的jquery函数变为
$(function() {
$(window).on('hashchange', function(e){
$("#main .content").hide();
$(window.location.hash).show();
});
if(window.location.hash != ""){
$(window).trigger('hashchange');
}
});
希望这应该有所帮助...... :)
$(function() {
$(window).on('hashchange', function(e){
$("#main .content").hide();
$(window.location.hash).show();
});
if(window.location.hash != ""){
$(window).trigger('hashchange');
}
});
.content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="canvas">
<div id="nav">
<ul id="toggle">
<li><a href="/home" data-page="page1">HOME</a>
</li>
<li><a href="#about-us">ABOUT US</a>
</li>
<li><a href="#portfolio" data-page="page3">PORTFOLIO</a>
</li>
<li><a href="#contact">CONTACT</a>
</li>
</ul>
</div>
<a href="#" class="toggle-nav" id="bars"><i class="fa fa-bars"></i></a>
<div id="main">
<div id="about-us" class="content">About us ................</div>
<div id="portfolio" class="content">Portfolio.............</div>
<div id="contact" class="content">Contact ...........</div>
</div>
</div>