HTML/CSS选项卡条

我希望只使用HTML和CSS编写/模拟选项卡条

我将使用JavaScript逐步增强这一点，不需要任何帮助

我从例6中得到了一些想法

这是一个

---

请不要拘泥于我当前的HTML和CSS标记。我希望使用HTML5和CSS3标准从零开始正确地编写这篇文章，并希望避免我通常的“如果它能工作，标记的质量不重要。jQuery将为我解决它！”态度

---

以下是我的HTML当前的标记：

<div class="tabs">
    <section>
        <a> link 1 </a>
        <div> Content 1 </div>
    </section>
    <section>
        <a> link 2 </a>
        <div> Content 2 </div>
    </section>
</div>

---

我有3个css问题

div.tabs

只有浮动子项和绝对子项，因此没有任何“真正的内容”，并且周围没有边框。我如何让它有一个适当的边界

.tabs>部分>div

的宽度为100%，但由于额外的填充，与父

div.tabs

的100%宽度不匹配。我对盒子模型缺乏理解。如何将其设置为具有与父级

div.tabs

匹配的宽度

如何使内容

.tabs>部分>div

位于选项卡条的

下方，而不将css

top

值设置为挑剔的

“43px”

。在这些情况下，做一般定位的正确方法是什么

免责声明我不在乎是否支持正确的浏览器。请随意使用HTML5/CSS3。我将使用JavaScript适当地增强IE8功能

---

如果有帮助，这是完整的CSS

.tabs {
    width: 100%;
    border: #000 solid 1px;
}

.tabs > section > a {
    position: relative;
    display: block;
    float: left;
    padding-left: 10px;
    margin-left: 5px;
    margin-right: 5px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 1px solid red;
}

.tabs > section {
    display: inline;
}

.tabs > section > div {
    z-index: -2;
    background: white;
    border: 1px solid blue;
}

.tabs > section:not(:target) > div {   
    position: absolute;
    padding: 20px;
    top: 50px;
    display: block;
    width: 100%;
}

---

如果您像您发布的示例那样将选项卡和内容分成两个不同的容器，那么您的所有问题都可以得到回答。只需清除选项卡后的浮动

<div class="tabbed-area">

    <ul class="tabs group">
        <li><a href="#box-one">Tab 1</a></li>
        <li><a href="#box-two">Tab 2</a></li>
        <li><a href="#box-three">Tab 3</a></li>
    </ul>

    <div class="box-wrap">

        <div id="box-one">
            <ul>
                <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
            </ul>
        </div>

        <div id="box-two">
            <p>Feugiat...</p>
        </div>

        <div id="box-three">
            <p>Pellen...</p>
        </div>

    </div>

</div>

Lorem ipsum dolor sit amet，是一位杰出的领导者

封建的

佩伦

我可以得到你的标签的工作版本。这是一本书。（然而，我无法解决你所有的难题。请阅读下面的内容。）

CSS:

HTML:

内容1
内容2

解决三个问题：

tab div确实会因为浮动和绝对定位的对象而崩溃。我看到的唯一选项是设置高度或溢出：使用底部填充隐藏

我能够将宽度设置为上面CSS中div.tabs的宽度。这可能是位置：相对的函数

同样，由于所有的对象都从流中取出，我看不出没有JavaScript的方法可以让

section>div

s知道锚定高度

---

另外，我喜欢使用：target，并且能够让您的内容块切换并具有默认值。

这使得基于

：target

选择器的功能变得一团糟。这实际上不是一个可行的选择，因为它无法精确地将附加的

定位到

div:target

。如果您在inspiration网站上查看示例6，您将看到我打算如何根据当前的

：target

选项卡使

脱颖而出。更不用说选项卡链接和选项卡内容组合在一起时的语义标记更有意义。大多数选项卡解决方案确实使用这种分离，但我同意它缺乏语义价值。@LeRoy我知道这种解决方案是如何工作的，但是我正在尝试将这个网站正确地分层，这样HTML标记就可以独立存在，而不仅仅是javascript使用的工具。我希望人们能够毫无厌恶地查看源代码。@Raynos我同意你的立场。对HTML的迂腐评论：看起来你将导航（选项卡）与内容（部分）结合起来了。这些可能需要单独的内容。@DA导航是逐页导航。我想以选项卡的方式在单个页面上显示内容。我将有一个单独的网页上的导航块以及网站导航。我不确定导航是否属于分区内或分区内not@Raynos...the规范规定“nav元素表示链接到其他页面或页面内部分的页面的一部分”，因此它可以用于任何一个页面。应该是吗？嗯，就像大多数HTML一样，很多HTML都是开放的，可以进行个人解释。我可以让它与

：target

自己很好地配合使用。我更喜欢他们使用

z-index

而不是你使用

left

来设置活动内容。我对“#2”的问题是将

填充

和

宽度：100%

一起使用，因为添加填充不包括在盒子模型的宽度中。出于某种原因，我之前的迭代在z索引方面遇到了问题，但这似乎也会起作用。（我在这里更改了-）您可以使用%填充（例如，填充：10px 10%；）和100%-2*填充的宽度。我喜欢%填充！令人惊叹的。现在，我如何使

div.tabs

具有某种相对不可见的内容，以便在javascript之外给它一个边框，您只能为div.tabs设置一个高度。至少就我所知（使用我上面提到的任何一种方法）。使用javascript，我可以想到几个选项。

<div class="tabbed-area">

    <ul class="tabs group">
        <li><a href="#box-one">Tab 1</a></li>
        <li><a href="#box-two">Tab 2</a></li>
        <li><a href="#box-three">Tab 3</a></li>
    </ul>

    <div class="box-wrap">

        <div id="box-one">
            <ul>
                <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
            </ul>
        </div>

        <div id="box-two">
            <p>Feugiat...</p>
        </div>

        <div id="box-three">
            <p>Pellen...</p>
        </div>

    </div>

</div>

.tabs {
    position: relative;
    width: 100%;
    background: #fff;
    overflow: hidden;
    padding-bottom: 100px;
    border: 1px solid #000;
    }

.tabs > section > a {
    position: relative;
    display: block;
    float: left;
    border: 1px solid red;
    }

.tabs > section > div {
    position: absolute;
    top: 1.5em;
    left: -50000px;
    width: 100%;
    background: #fff;
    border: 1px solid blue;
    }

.tabs > section:target > div {
    left: 0;
    }

.tabs > section:not(:target)#one > div {
    left: 0;
    }

<div class="tabs">
    <section id="one">
        <a href="#one">link 1</a>
        <div> Content 1 </div>
    </section>
    <section id="two">
        <a href="#two">link 2</a>
        <div> Content 2 </div>
    </section>
</div>