选项卡式导航

我真的很难弄清楚如何执行以下操作：

我想要有两个选项卡（水平相邻），一个用于搜索（并如此标记），另一个用于帖子（如此标记）。当选择搜索选项卡时，我希望出现一个搜索框，当选择帖子选项卡时，我希望出现另一个搜索框。我不想隐藏搜索框。我猜它本质上是使用 CSS 的选项卡式导航，但我一辈子都不知道如何让它工作。

这是我到目前为止的html（我对此很陌生，所以请提供任何建议）

<div id="navigation">
  <ul class="nav"> 
   <li class="first-selected"><a href="">Search</a></li>
   <div class="search">
    <p><form method="post" action="twocents.html">
    <label for="Search"></label>
    <input type="text" name="Search" id="Search"/>
    <input type="submit" value="Search"/></p>
</div>

<li class="second-selected"><a href="">Post</a></li> 
<div class="post"> 
 <p><form method="post" action="twocents.html">
 <label for="Search"></label>
 <input type="text" name="Post" id="Post"/>
 <input type="submit" value="Post"/></p>
</div>
</ul>
</div>

这就是你如何做到这一点:target伪类

FIDDLE http://jsfiddle.net/8hrcu/3/

Markup

<div id="navigation">
  <ul class="nav"> 
   <li class="first-selected"><a href="#Search">Search</a></li>
   <li class="second-selected"><a href="#Post">Post</a></li> 
   </ul>  
</div>

<div id="Post" class="post"> 
 <p><form method="post" action="twocents.html">
 <label for="Search"></label>
 <input type="text" name="Post" id="Post"/>
 <input type="submit" value="Post"/></p>
</div>

<div id="Search" class="search">
    <p><form method="post" action="twocents.html">
    <label for="Search"></label>
    <input type="text" name="Search" id="Search"/>
    <input type="submit" value="Search"/></p>
</div>

CSS

li
{
    display: inline-block;
}
.search
{
    display: block;
}
.post
{
    display:none;
}
.post:target
{
    display: block;
}

.post:target + .search
{
    display: none;
}