CSS 问题，创建选项卡

Question

我有一个我无法解决的 CSS 问题。我什至不确定这是否可能。我想要的是以下内容：

我有三个像这样的按钮/选项卡 http://sv.tinypic .com/r/21cf85t/6 当您单击一个选项卡时，每个选项卡应该显示不同的 div，如下所示 http://sv.tinypic.com/r/21l5y85/6 或 http://sv.tinypic.com/r/2dbrv5u/6。

我知道如何使用 jQuery 显示/隐藏 div，但问题是 div 的高度会增加 http://sv.tinypic.com/r/k2xxfb/6 然后他们会将其他选项卡和 div 向下推。有没有办法创造我想做的事情？

我不是 CSS 专家，所以如果你有一个例子可以看或者可以在这里发布代码，我将非常非常感激！

这是我用于选项卡的 HTML：

<div class="MainContent">Content</div>
<div class="TabsHolder">
    <div id="Tab1">
        <div style="width:200px">
            Content Tab 1
        </div>
    </div>
    <a class="Button1" href="#Tab1"></a>
    <div class="clearer"></div>
    <div id="Tab2">
        <div style="width:200px">
            Content Tab 2
        </div>
    </div>
    <a class="Button2" href="#Tab2"></a>
</div>

CSS：

.MainContent {
    float: left;
}

.TabsHolder 
{
    float: left;
}

.Button1
{
    float: left;
    margin: 100px 0px 20px 0px;
    background: url(images/Button1.png) no-repeat 0 0;
    height: 79px;
    width: 27px;
}

#Tab1
{
    width: 200px;
    margin: 80px 0px 20px 0px; 
    border: solid 1px #ACCD45;
    position: relative;
    float: left;
    overflow: hidden;
    padding: 20px;
}

.Button2
{
    float: left;
    margin: 0px 0px 20px 0px;
    background: url(images/Button2.png) no-repeat 0 0;
    height: 97px;
    width: 27px;
}

#Tab2
{
    width: 200px;
    margin: 0px 0px 20px 0px;
    border: solid 1px #ACCD45;
    position: relative;
    float: left;
    overflow: hidden;
    padding: 20px;
}

div.clearer 
{
clear: both;
margin: 0px;
margin-bottom: 0px;
margin-top: 0px;
padding: 0px;
line-height: 0px; 
height: 0px;
width: 0px;
overflow: hidden;
}

Answer 1

这是我使用纯 CSS 组合而成的 - 在 Firefox、IE8 和 Chrome 中测试（不确定其他版本）。 此处演示。

注意：我想对原始 HTML 中的一件事发表评论 - 您无法将背景图像添加到链接 标记中。

CSS

.MainContent {
 float: left;
 width: 400px;
 height: 400px;
 background: #444;
}

.buttons {
 float: left;
 margin: 10px 0 10px 0;
 width: 27px;
 clear: both;
}

.Button1 {
 background: #555 url(images/Button1.png) no-repeat 0 0;
 height: 79px;
}

.Button2 {
 background: #555 url(images/Button2.png) no-repeat 0 0;
 height: 97px;
}

.Button3 {
 background: #555 url(images/Button3.png) no-repeat 0 0;
 height: 127px;
}

.tabsHolder {
 float: left;
 position: relative;
}

.tabs {
 width: 200px;
 height: 200px;
 margin: 0 0 20px 0;
 border: solid 1px #ACCD45;
 background: #444;
 overflow: hidden;
 padding: 20px;
 display: none;
 position: absolute;
 left: 0;
}

#tab1 { top: 0; }
#tab2 { top: 98px; }
#tab3 { top: 215px; }

a:hover .tabs {display: block;}

HTML

<div class="MainContent">Content</div>
 <div class="tabsHolder">

  <a href="#tab1"><div class="buttons Button1">1</div>
   <div id="tab1" class="tabs">
    Content tab 1
   </div>
  </a>

  <a href="#tab2"><div class="buttons Button2">2</div>
   <div id="tab2" class="tabs">
    Content tab 2
   </div>
  </a>

  <a href="#tab3"><div class="buttons Button3">3</div>
   <div id="tab3" class="tabs">
    Content tab 3
   </div>
  </a>

 </div>
</div>

Answer 2

您需要在两个单独的 div 中定义页面（要隐藏/显示的 div）和选项卡。

这些将希望彼此相邻浮动，因此您将拥有类似的内容

<div class="pages">
<div class="page" id="tab1">....</div>
<div class="page" id="tab2">....</div>
</div>
<div class="tabs">
<div class="tab"><a href="#tab1">Tab 1</a></div>
<div class="tab"><a href="#tab2">Tab 2</a></div>
</div>

然后您可以在页面上设置最小高度（IE6的高度，放入条件样式表中），将页面和选项卡设置为向左浮动，两者都使用固定宽度。

最后，当您将事件附加到 $('#tab a') 时，请确保迭代所有隐藏不相关页面的页面。

Answer 3

如果没有 JavaScript，您就无法隐藏您的 div 之一，每个选项卡只能有一个 HTML 页面（例如 此或此< /a>）。

如果你想要更动态的东西，你应该使用 JavaScript。例如，选项卡系统是 jQuery 的内置组件。 （主页，现场演示）。

希望这会帮助你。