Question

我正在为我的网站编写一个标签系统，它必须完全是CSS / HTML / JS（不使用任何图像）。问题是，我一直在破解代码直到我完成它只是一团糟。我不知道是使用定位，还是浮动标签或什么。基本上一个大问题是，在我拿走所选标签的底部边框CSS后，我需要将其向下移动1px，以便它与排序标题无缝融合 - 我不知道是否使用保证金：-1px或位置：相对/绝对等。我喜欢一些关于编写像这样的标签系统的好方法的建议，以便它可以在整个网站上重复使用！

alt text

Answer 1

以下是使用CSS的示例：

HTML：

<body>
    <div class="tabs">
        <ul>
            <li><a href="#item1">Item 1</a></li>
            <li class="active"><a href="#item2">Item 2</a></li>
            <li><a href="#item3">Item 3</a></li>
        </ul>
        <div class="tabInner">
            <div id="item1">
                bla1
            </div>
            <div id="item2">
                bla2
            </div>
            <div id="item3">
                bla3
            </div>
        </div>
    </div>
</body>

CSS：

.tabs ul {
    list-style: none;
}

.tabs ul li {
    float: left;
    background: #eee;
    border: 1px #aaa solid;
    border-bottom: none;
    margin-right: 10px;
    padding: 5px;
}

.tabs ul li.active {
    margin-bottom: -1px;
    padding-bottom: 6px;
}

.tabInner {
    clear: both;
    border: 1px solid #aaa;
    height: 200px;
    overflow: hidden;
    background: #eee;
}

.tabInner div {
    height: 200px;
    padding: 10px;

}

它甚至可以在没有JS的情况下工作（在某种程度上）。你仍然需要一些JS来移动'active'类arround，如果你想要花哨的过渡。

在此处查看此行动：http://jsfiddle.net/V8CK4/

Answer 2

我会使用嵌套在列表中的div。

<ul>
<li>Tab1
    <div> Content for Tab1</div>  
</li>
<li>Tab2
    <div> Content for Tab2</div>  
</li>
<li>Tab3
    <div> Content for Tab3</div>  
</li>
</ul>

然后用css样式ul li div来显示。我会使用jQuery在点击父li时显示子div。

编辑：感谢评论......请注意，li必须采用内联样式，以便它们不会在每个内容后断行。同时将li list-style设置为none。

Answer 3

在我看来，我会这样写：

<div class="tabContainer">
    <ul class="tabList">
        <li><a href="#item1">Item 1</a></li>
        <li><a href="#item2">Item 2</a></li>
        <li><a href="#item3">Item 3</a></li>
    </ul>

    <em class="tabMessage">This is the message on the right.</em>

    <div class="tabInnerContainer">
        <div id="item1">
            bla
        </div>
        <div id="item2">
            bla
        </div>
        <div id="item3">
            bla
        </div>
    </div>
</div>

这种方式将允许你在没有Javascipt的情况下使其至少在某种程度上起作用，在关闭JS的浏览器中很好地降级。如果使用CSS3 sleectors，可以删除一些类。

Answer 4

我认为问题是使标签和它下面的条看起来像一块而不使用太多代码。

我之前做过的是让我想要连接的两个元素稍微重叠（或根本不重叠），然后放置重叠所在的第三个元素（与其他元素颜色相同）。这是一种补丁。

像这样：

<强>予。没有补丁

     _________________ 
    |                 |
    |    tab          |
  __|_________________|________________________________
 |                                                     |
 |       menu bar                                      |
 |_____________________________________________________|

<强> II。有补丁

     _________________ 
    |    tab          |
    |- - - - - - - - -|
 ___|    patch        |_______________________________
|    - - - - - - - - -                                |
|        menu bar                                     |
|_____________________________________________________|

您只需使用z-indexes即可正常使用。修补程序可以使用position: absolute扩展到包含在其中的制表符div上，并使用top的足够高的值。

更新：演示

http://jsfiddle.net/7GJaW/

Answer 5

像@Otis提到的那样，嵌套是一种非常好的技术。我通常筑巢ul




Link 1

Link 1 Item 1
Link 1 Item 2

但是，如果您不想尝试下拉...

编写HTML / CSS / JS选项卡导航系统的最佳方法（无图像）

5 个答案: