1

我正在开发一个完整的 CSS 选项卡导航。这就是我想要做的：http: //jsfiddle.net/7fZnn/1/

但我不想使用内联 CSS 来放置标签。所以我研究什么可以取代这个内联 CSS。我发现那些：

  • attr() 函数，仅当您选择和元素时支持内容属性：before of :after
  • CSS 计数器。那太好了，但是作为 attr() 函数，这仅适用于内容属性
  • CSS 变量，这应该在 Firefox 29 中工作，实际上我使用 30。但它没有，我不知道为什么......

这是我的带有 CSS 变量的代码（以及注释中的计数器）：http: //jsfiddle.net/j8wxQ/2/

的HTML

<div class="container">
    <div class="tabs">
        <div class="tab" id="foo">
            <a href="#foo">Foo</a>
            <div class="content">
                <h1>Onglet 1</h1>
                <p>Lorem Ipsum...</p>
            </div>
        </div>
        <div class="tab" id="bar">
            <a href="#bar">Bar</a>
            <div class="content">
                <h1>Onglet 2</h1>
                <p>Lorem Ipsum...</p>
            </div>
        </div>
        <div class="tab" id="toto">
            <a href="#toto">Toto</a>
            <div class="content">
                <h1>Onglet 3</h1>
                <p>Lorem Ipsum...</p>
            </div>
       </div>
       <div class="tab" id="tata">
           <a href="#tata">Tata</a>
           <div class="content">
               <h1>Onglet 4</h1>
               <p>Lorem Ipsum...</p>
           </div>
       </div>
       <div class="tab default" id="titi">
           <a href="#titi">Titi</a>
           <div class="content">
               <h1>Onglet 5</h1>
               <p>Lorem Ipsum...</p>
           </div>
       </div>
    </div>
</div>

CSS

:root {
    var-tab: 0px;
}

@media screen and (min-width: 1025px) {
    .container {
        width: 1000px;
        margin: auto;
    }
}

@media screen and (max-width: 1024px) and (min-width: 641px) {
    .container {
        width: 99%;
        margin: auto;
    }
}

@media screen and (max-width: 640px) {
    .container {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    body, html {
        margin: 0;
        padding: 0;
    }
}

.tabs {
    position: relative;
    width: 100%;
    /*counter-reset: tab 0;*/
}

.tab {
    /*counter-increment: tab;*/
    var-tab: calc(var(tab) + 75px);
}

.tab .content {
    display: none;
    position: absolute;
    top: 50px;
    margin-top: -5px;
    border: solid 5px rgba(0,0,255, 0.1);
    padding: 10px 10px 10px 10px;
}

.tab:target .content {
    display: block;
    position: absolute;
    top: 50px;
}

.tab.default .content{
    display: block;
    position: absolute;
    top: 50px;
}

.tab:target ~ .tab.default .content {
    display: none;
}

.tabs .tab a {
    position: absolute;
    top: 0;
    left: var(tab);
    /*left: calc(75px * counter(tab));*/
    display: inline-block;
    height: 45px;
    line-height: 45px;
    min-width: 75px;
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: #000;
    vertical-align: middle;
    border-bottom: solid 5px rgba(0,0,255, 0.1);
    text-align: center;
}

.tabs .tab a:hover {
    border-bottom: solid 5px rgba(0,0,255,0.5);
}

.tabs .tab:target a {
    border-bottom: solid 5px rgba(0,0,255,1);
}

p {
    text-align: justify;
}

那么，我错过了什么？你认为我可以用别的东西来实现我的目标吗？

谢谢你的帮助！

4

3 回答 3

2

您可以尝试更改这些：

.tab {
    /*counter-increment: tab;*/
    /*var-tab: calc(var(tab) + 75px);*/
    width: 75px; //fixed width, like you did on your example
    display: inline-block;
}

.tab .content {
    display: none;
    position: absolute;
    top: 50px;
    left: 0; //push all content to the left edge of tab
    margin-top: -5px;
    border: solid 5px rgba(0,0,255, 0.1);
    padding: 10px 10px 10px 10px;
}

我已经更新了你的小提琴，看看这是否适合你。

观察：选项卡之间的小间距可能是 html 标记，隐藏的空格字符可能是 .tabs div 的。

于 2014-04-22T14:19:45.600 回答
0

CSS 变量在 Firefox 版本 31 中启用。您必须在早期版本 29 和 30 中设置一个标志才能启用它。

于 2015-04-21T13:29:22.253 回答
0

不幸的是，css 变量还远未准备好生产（即支持广泛到足以在公共站点上使用）。

我相信最可行的（纯 CSS）解决方案是最明显的解决方案，因为选项卡数量有限，您可以简单地为每个选项卡设置一个选择器。这不是特别优雅，但工作得很好。

.tab:nth-child(1) > a {
    left: calc(74px * 0);
}
.tab:nth-child(2) > a {
    left: calc(74px * 1);
}
.tab:nth-child(3) > a {
    left: calc(74px * 2);
}
/* etc.. */

http://jsfiddle.net/7fZnn/2/

于 2014-04-22T14:18:57.170 回答