Question

我很难确定如何执行以下操作：

我希望有两个标签（水平相邻），一个用于搜索（并标记为这样），另一个用于帖子（标记为这样）。当选择搜索选项卡时，我想要一个搜索框，当选择了帖子选项卡时，我想要另一个搜索框。我不希望隐藏搜索框。我猜它本质上是使用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>

Answer 1

这是你用纯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;
}

Answer 2

这是你使用:target伪类

的方法

<强> FIDDLE

标记

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

Answer 3

纯css还有另一种方法。困难在于保留选项卡的“活动”状态，这可以通过在选项卡按钮上使用radio输入来完成。这有点hackish，但它工作正常

html看起来像这样：

<ul class="tabs">
    <li class="tabs-page">
        <input type='radio' name='tab' id='tab-search' checked/>
        <label for='tab-search'>Search</label>
        <div class="content">
            <h2>The search page</h2>
        </div>
    </li>
    <li class="tabs-page">
        <input type='radio' name='tab' id='tab-post' />
        <label for='tab-post'>Post</label>
        <div class="content">
            <h2>The post page</h2>
        </div>
    </li>
</ul>

注意将用作按钮的输入和标签。（另请注意，我更正了您的标记，您只能使用li作为ul的直接子项!!）

css看起来像这样：

input[name='tab'] {
    display: none;
}
input[name='tab'] ~ .content {
    display: none;
}
input[name='tab']:checked ~ .content {
    display: block;
}

通过组合:checked选择器（以检测“标签按钮”的状态）和同级~选择器，您可以确定应显示哪个标签页。

我也为你设置了一个小例子： http://jsfiddle.net/j9YbW/

Answer 4

对我以前的帖子感到抱歉。我已经修改了Danield的标签视图，现在它的可扩展性和可靠性。

Thanx Danield。

    li {
                display: inline-block;
                margin-right: 10px;
                list-style: none;
            }

            .frame {
                display: none;
            }

                .frame:target {
                    display: block;
                }





    /// Markup


    <div id="navigation">
            <ul class="nav">
                <li><a href="#tab1">Tab1</a></li>
                <li><a href="#tab2">Tab2</a></li>
                <li><a href="#tab3">Tab3</a></li>
                <li><a href="#tab4">Tab4</a></li>
            </ul>
        </div>

            <div id="tab1" class="frame">
                <p>
                    Tab 1
                </p>
            </div>

            <div id="tab2" class="frame">
                <p>
                    Tab 2
                </p>
            </div>

            <div id="tab3" class="frame">
                <p>
                    Tab 3
                </p>
            </div>

            <div id="tab4" class="frame">
                <p>
                    Tab 4
                </p>
            </div>

选项卡式导航

4 个答案:

标记

CSS