标签式导航 [英] Tabbed navigation

问题描述

我有实际的困难想像如何做以下：

I'm having real difficulty figuring how to do the following:

我想有两个标签（水平相邻），一个用于搜索标记为这样）而另一个用于柱（如此标记）。当选择搜索标签时，我想要一个搜索框，当选择标签页时，我想要另一个搜索框。我不想隐藏搜索框。我想这实际上是使用CSS的标签式导航，但我不能为我的生活弄清楚如何让它工作。

I want to have two tabs (horizontal next to each other), one for search (and labelled as such) and another for post (labelled as such). When the search tab is selected i want a search box to be present and when the post tab is selected i want another search box to be present. I don't want the search boxes to be hidden. I guess it's essentially tabbed navigation using CSS but i can't for the life of me figure out how to get it to work.

这是我迄今为止的html （我是新的，所以请任何建议是伟大的）

this is the html i have so far (i'm new to this so please any advice would be great)

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

推荐答案

这是你可以用pure css做的最好的。

This is the best you could do with pure css.

/// Markup

<ul class="tabs">
        <li tabindex="1">
            <a>Search</a>
            <div class="tab-content">
                Search : <input type="text" />
            </div> 
        </li>
        <li tabindex="1">
            <a>Post</a>
            <div class="tab-content">
                Post: <input type="text" />
            </div> 
        </li>
    </ul>


/// CSS

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden;
}
ul.tabs li {
  float: left;
  margin: 20px 0 5px 10px;
  list-style: none;
  width: 100px;
}
ul.tabs li a {
  display: block;
  background-color: #ccc;
  padding: 5px 10px;
  cursor: pointer;
  text-align: center;
}
ul.tabs li a:hover {
  background-color: #7cc6fb;
}
ul.tabs li:focus {
  outline: none;
}
ul.tabs li:focus > a {
  background-color: #0094ff;
}
ul.tabs li:focus .tab-content {
  z-index: 100;
}
ul.tabs li .tab-content {
  position: absolute;
  left: 20px;
  top: 70px;
  right: 20px;
  bottom: 20px;
  z-index: 10;
  padding: 50px;
  background-color: #fff;
  border: 1px solid #999;
}

这篇关于标签式导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！