如何显示/隐藏div

Question

我想弄清楚如何做到这一点...我有4个div，我期待显示和隐藏一次。链接到divs是在一个单独的嵌套div。这里是我的代码：

<div id="container"> 
    <div class="roundbox"> 
     <ul> 
      <li class="t"> 
       <a href="">Main</a> 
      </li> 
      <li class="e"> 
       <a href="">News</a> 
      </li> 
      <li class="t"> 
       <a href="">History</a> 
      </li> 
      <li class="e"> 
       <a href="">Contact</a> 
      </li> 
     </ul> 
    </div> 
    <div class="inceptioncontent"> 
     <div class="content"> 
      <div class="contentnest"> 
       <div id="1"></div> 
       <div id="2"></div> 
       <div id="3"></div> 
       <div id="4"></div> 
      </div> 
     </div> 
    </div> 
</div> 

我希望Main，News，Contact和History链接显示/隐藏contentnest div中相应的div。有任何想法吗？谢谢！

Answer 1

JQuery擅长做他的事情。这看起来是一个很好的开始：http://papermashup.com/simple-jquery-showhide-div/

Answer 2

看起来您正在寻找一个下拉菜单。你可以做到这一点： 使用Javascript + css编写它（使用像jQuery这样的框架会更容易） ;用Css ;正在下载一个插件

我认为“Css only”是最好的方法，jQuery很酷并且下载插件是最简单的方法，但是您需要用户的浏览器的js处于打开状态。

您可以检查如何只用在这里的CSS做到这一点：

https://www.grc.com/menudemo.htm