javascript - ShowHide Divs via anchor links in a navbar - Stack Overflow

admin管理员组

文章数量:1432178

I have a navbar that uses anchor links to connect to different divs. I have all the div's hidden, but I want them to show based on what link you click.

<!-- NAV CONTAINER -->
<div class="navContainer">  
  <nav class="clearfix">
  <ul class="clearfix">
     <li><a href="#home">Home</a></li>
     <li><a href="#page1">Overview</a></li>
  </ul>
  </nav>
</div>

<!-- DIV CONTAINER -->
<div class="container">

<div class="sections" id="home">
homepage with title here 
</div>

<div class="sections" id="page1">
page 1
</div>
</div>

I know you can do it using jQuery but I haven't been able to make anything work. Right now the divs are set to display:none. 'Home' should appear when you load the site.

I have a navbar that uses anchor links to connect to different divs. I have all the div's hidden, but I want them to show based on what link you click.

<!-- NAV CONTAINER -->
<div class="navContainer">  
  <nav class="clearfix">
  <ul class="clearfix">
     <li><a href="#home">Home</a></li>
     <li><a href="#page1">Overview</a></li>
  </ul>
  </nav>
</div>

<!-- DIV CONTAINER -->
<div class="container">

<div class="sections" id="home">
homepage with title here 
</div>

<div class="sections" id="page1">
page 1
</div>
</div>

I know you can do it using jQuery but I haven't been able to make anything work. Right now the divs are set to display:none. 'Home' should appear when you load the site.

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Mar 26, 2014 at 16:57 mbethkmbethk 2111 silver badge22 bronze badges 1

• 1 You say you have tried...show us what you tried in a JSFiddle and we can correct/improve that. – Paulie_D Commented Mar 26, 2014 at 16:59

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

One possible solution is to use the css pseudo-selector :target

.sections {display:none;}
.sections:target {display:block;}

Demo

CSS3 selectors are pretty well supported but :target can give odd or buggy behaviour as mentioned here: http://css-tricks./on-target/

If you want to control it with jQuery... try it: http://jsfiddle/luiggi/kRgt6/

$(document).ready(function () {
    $("li.home").click(function () {
        $("#home").toggle();
        $("#page1").hide();
    });

    $("li.overview").click(function () {
        $("#page1").toggle();
        $("#home").hide();
    });
});

You'll likely need to add some sort of CSS class to the anchor links so you can find the specific triggers more easily.

Just from memory, the code will be something like this (assuming anchors have the "ToggleDiv" class name).

$('.ToggleDiv').each(function(el){
     var divId = $(el).attr("href");
     $(el).click(function(){
         $(divId).Toggle();
     });
})

本文标签： javascriptShowHide Divs via anchor links in a navbarStack Overflow