用另一个onclick交换默认div

Question

我想div div上有一些内容和一些其他div可用但在加载时不可见。当我点击给定的链接时，它将隐藏当前显示的div并使该div可见。

<div class="current">
    This is here by default 
</div>

<div class="link 1 hidden">
    Link 1 info
</div>

<div class="link 2 hidden">
    Link 2 info
</div>

<div class="link 3 hidden">
    Link 3 info
</div>

<div class="link 4 hidden">
    Link 4 info
</div>

Answer 1

一种非常简单的方法是在CSS中使用：target 伪类。

您可以在此处查看示例：http://jsfiddle.net/t4hoff4c/

您必须为导航链接和部分分配相同的ID。

<强> HTML

 <li><a href="#one">First Paragraph</a></li>

 <section id="one">
     Lorem ipsum dolor sit amet, consectetur ...
 </section>

<强> CSS

section:target{
  display:block;
}

section{
  display:none;
}

最终，您可以使用一些Javascript来在页面加载时分配默认的活动类。希望有所帮助。