CSS问题，创建标签 [英] CSS problem, creating tabs

问题描述

我有一个CSS问题，我不能弄清楚。我甚至不确定这是可能的。我想要的是以下：

I have a CSS problem that I'm not able to figure out. I'm not even sure it is possible. What I want is the following:

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

I have three buttons/tabs like this http://sv.tinypic.com/r/21cf85t/6 and when you click one tab a different div should show for each tab like this http://sv.tinypic.com/r/21l5y85/6 or http://sv.tinypic.com/r/2dbrv5u/6.

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

I know how to show/hide the divs with jQuery but the problem is that the divs will increase in height http://sv.tinypic.com/r/k2xxfb/6 and then they will push the other tabs and divs down. Is there a way to create what I am trying to do?

我不是CSS中的上师，所以如果你有一个例子，或者可以在这里post代码我会非常感谢！

I'm not a guru in CSS so if you have an example to look at or can post code here I would be very very thankful!

这是我为我的标签使用的HTML：

This is the HTML I'm using for my tabs:

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

推荐答案

使用纯CSS - 在Firefox，IE8和Chrome（不知道别人）测试。请尝试此处演示。

Here is what I put together using pure CSS - Tested in Firefox, IE8 and Chrome (not sure about others). Try out a demo here.

注意：我想要对您原始HTML中的一件事发表评论 - 您无法向链接< a> 添加背景图片。

Note: I wanted to make a comment about one thing in your original HTML - you can't add a background image to a link <a> tag.

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>

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