HTML / CSS Tabstrip

Question

我正在寻找使用HTML＆amp; amp;编写/模拟标签条。仅限CSS。

我将使用JavaScript逐步增强此功能，并且不需要任何帮助。

我从this page示例6

中提取了想法

这是live example

---

请随时对我当前的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>

---

这是（剥离的）CSS：

.tabs {
    width: 100%;
}

.tabs > section > a {
    position: relative;
    display: block;
    float: left;
}

.tabs > section {
    display: inline;
}

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

---

我遇到了3个css问题。

1. div.tabs只有浮动和绝对的孩子所以没有任何“真实内容”，周围没有边框。如何让它拥有合适的边框？
2. 由于额外的填充，.tabs > section > div的宽度为100％，但与父div.tabs的100％宽度不匹配。我对盒子模型的理解缺乏。如何将其设置为与div.tabs父级匹配的宽度？
3. 如何将内容.tabs > section > div放在标签条的<a>下方，而不将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%;
}

Answer 1

我能够获得标签的工作版本。这是一个jsFiddle version。 （但是，我无法解决你所有的困境。请阅读以下内容。）

CSS：

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

HTML：

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

解决三个问题：

1. 由于浮动和绝对定位的对象，tab div会崩溃。我看到的唯一选项是设置高度或溢出：隐藏底部填充。
2. 我能够在上面的CSS中将宽度设置为div.tabs的宽度。这可能是position: relative。
的一个功能
3. 同样，由于所有对象都被取消了，我没有看到没有JavaScript的方法让section > div知道锚点高度。

PS。我喜欢使用：target并且能够让你的内容块切换以及默认。

Answer 2

如果您将标签和内容分成两个不同的容器（如您发布的示例），则可以回答所有问题。只需清除标签后的浮动。

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