0

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

我想要两个选项卡（彼此相邻的水平），一个用于搜索（并标记为此类），另一个用于发布（标记为此类）。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. 我不想隐藏搜索框。我想它本质上是使用 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>
4

4 回答 4

0

纯CSS还有另一种方法。困难在于保留选项卡的“活动”状态，这可以通过使用radio选项卡按钮上的输入来完成。这有点骇人听闻，但效果很好

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/

于 2013-10-05T21:56:26.753 回答
0

这就是你使用:target伪类的方式

小提琴

标记

<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;
}
于 2013-10-05T21:31:17.073 回答
0

对不起我之前的帖子。我稍微修改了 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>
于 2013-10-05T22:05:59.100 回答
0

这是你可以用纯 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;
}
于 2013-10-05T21:20:52.323 回答