0

現在、サイトには 2 つのレベルのナビゲーションがあります。ナビゲーションを選択すると、1 ページのサイトの特定のセクションが非表示/表示されます。私がやろうとしているのは、#selected-workナビゲーション リンクが非アクティブな間、セカンダリ ナビゲーションを非表示にすることです。いいね#selected-workが選択されたら、セカンダリ ナビゲーションを表示したいと思います。hashchangeこれまでのところ、関数を実行してさまざまなコンテンツ領域を非表示/表示するように jquery をセットアップしましたが、セカンダリ ナビゲーションで目標を達成する方法がわかりません。すべての提案は大歓迎です。

これらのセクションのコードは次のとおりです。

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 に答える