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;}

Demo

CSS3 selectors are pretty well supported但: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();
     });
})

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

3 个答案: