如何使用jquery隱藏/顯示輔助導航

目前我在我的網站上有兩個級別的導航。選定時，導航會隱藏/顯示1頁網站的某些部分。我想要做的是隱藏輔助導航，而導航鏈接處於非活動狀態。一旦選中了#selected-work之後，我希望顯示我的輔助導航。到目前爲止，我已經設置了一些jquery來運行hashchange函數&隱藏/顯示不同的內容區域，但是我很遺憾如何使用輔助導航來實現我的目標。所有建議都非常受歡迎。如何使用jquery隱藏/顯示輔助導航

這是我對那些secitons代碼：

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


});

來源

2013-01-23 Forb3s

你的問題似乎不完整，沒有完全闡述。主導航中的其他鏈接呢？其他內容呢...我有點失落 –

沒有看到你的HTML的其餘部分我不能確定，但你可以不添加輔助導航到你的'＃selected-work'元素，並使用一些絕對定位來把它放在正確的地方。然後只有在顯示'＃selected-work'時纔會顯示。我還建議使用'：target'僞類顯示和隱藏活動部分而不是javascript。 – Jrod

迴應第1部分：如果我的問題有點含糊，我很抱歉。 @roXon主導航欄中的其他鏈接改變了網站'＃main-content'部分顯示的內容。當每個導航鏈接被選中（即#selected-work，＃cv，#contact）時，'＃main-content'區域顯示/隱藏每個對應的div。「所選工作區域將顯示兩層顯示的內容，當＃selected-work的主導航鏈接是點擊（來自＃nav-list'）一個頁面顯示在'＃main-content'內時（請參閱第2部分） – Forb3s

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-23 17:49:14

這是演示你的小提琴：http://jsfiddle.net/Fqkyz/5/ –

嗯......它隱藏了整個'＃left-nav-wrapper' div。我希望div可以留下來，因爲它是頁面設計的一部分。我只想隱藏鏈接，直到點擊「選擇工作」鏈接。然後將顯示整個左側導航欄，當左側導航欄中單擊任何鏈接時，相應的內容將顯示在頁面的主要內容區域中。此外，當任何左導航鏈接點擊其他導航鏈接不應該消失.... – Forb3s

如何使用jquery隱藏/顯示輔助導航

回答

相關問題