目前我的网站上有两个级别的导航。选中后,导航会隐藏/显示1页网站的某些部分。我要做的是在#selected-work
导航链接处于活动状态时隐藏辅助导航。选择#selected-work
之后,我希望显示辅助导航。到目前为止,我已经设置了一些jquery来运行hashchange
函数&隐藏/显示不同的内容区域,但我不知道如何通过辅助导航实现我的目标。所有的建议都非常受欢迎。
这是我的代码:
HTML
<div id="header-nav-float-wrap">
<!--main navigation-->
<ul class="nav-list">
<li><a href="#selected-work" id="selected-work-link">Selected Work</a></li>
<li><a href="#cv">CV</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
<!-- Secondary Nav -->
<div id="left-nav-wrapper">
<div id="left-nav">
<ul class="left-nav-list">
<li><a href="#painting">Painting</a></li>
<li><a href="#drawing">Drawing</a></li>
<li><a href="#design">Design</a></li>
<li><a href="#commissions">Commissions</a></li>
</ul>
</div>
</div>
<div id="main-content-wrapper">
<div id="main-content">
<!-- default page content -->
<div id="default" class="content-pages">
<img src="img/painting1.jpg">
</div>
</div>
</div>
的Javascript
$(document).ready(function() {
$(window).on("hashchange", function(e) {
$(location.hash.length > 1 ? location.hash : "#default").siblings().hide().end().show();
}).trigger("hashchange");
});
答案 0 :(得分:1)
的 LIVE DEMO 强>
$(document).ready(function() {
$(window).on("hashchange", function(e) {
var hashID = window.location.hash;
$(hashID.length > 1 ? hashID : "#default").show().siblings().hide();
var show_hide = hashID=='#selected-work' ? 'show' : 'hide';
$('#left-nav-wrapper')[show_hide]();
}).trigger("hashchange");
});