如何使用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隐藏/显示辅助导航

回答

相关问题