Registernavigation

Es fällt mir wirklich schwer, herauszufinden, wie ich Folgendes mache:

Ich möchte zwei Registerkarten (horizontal nebeneinander) haben, eine für die Suche (und als solche gekennzeichnet) und eine für den Beitrag (als solche gekennzeichnet). Wenn die Suchregisterkarte ausgewählt ist, soll ein Suchfeld vorhanden sein, und wenn die Beitragsregisterkarte ausgewählt ist, soll ein anderes Suchfeld vorhanden sein. Ich möchte nicht, dass die Suchfelder ausgeblendet werden. Ich denke, es ist im Wesentlichen eine Navigation mit Registerkarten unter Verwendung von CSS, aber ich kann für mein ganzes Leben nicht herausfinden, wie ich es zum Laufen bringen kann.

Dies ist das HTML, das ich bisher habe (ich bin neu in diesem, also bitte, jeder Rat wäre großartig)

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

Antworten auf die Frage(4)

Ihre Antwort auf die Frage