通過導航欄中的錨點鏈接顯示/隱藏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();
     });
})