如何使用jquery隐藏/显示辅助导航

时间:2013-01-23 17:08:24

标签: javascript jquery html

目前我的网站上有两个级别的导航。选中后,导航会隐藏/显示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");


});

1 个答案:

答案 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");



});