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中测试过（不确定其他人）。试试demo here。

注意：我想对原始HTML中的一件事做出评论 - 您无法将背景图片添加到链接<a>标记。

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页面（例如this或this）。

如果你想要更动态的东西，你应该使用JavaScript。例如，标签系统是jQuery的内置组件。（Homepage，live demo）。

希望能帮到你。

CSS问题，创建标签

3 个答案: