如何顯示/隱藏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