通过导航栏中的锚点链接显示/隐藏Div

Question

我有一个导航栏使用锚链接连接到不同的div。 我隐藏了所有div，但我希望它们根据您点击的链接显示。

<!-- 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>

我知道你可以使用jQuery做到这一点，但我无法做任何事情。 现在div设置为display：none。 加载网站时应显示“主页”。

Answer 1

一种可能的解决方案是使用css伪选择器:target

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

演示

CSS3选择器得到了很好的支持，但是:target可以提供奇怪或错误的行为，如下所述： http ： //css-tricks.com/on-target/

Answer 2

如果你想用jQuery控制它...试试看： http ： //jsfiddle.net/luiggi/kRgt6/

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

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

Answer 3

您可能需要在锚链接中添加某种CSS类，以便您可以更轻松地找到特定的触发器。

仅从内存中，代码将是这样的（假设锚具有“ToggleDiv”类名）。

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