0

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


});
4

1 回答 1

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



});
于 2013-01-23T17:49:14.627 回答