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

【问题标题】：Best way to code an HTML/CSS/JS tab navigation system (no images)编写 HTML/CSS/JS 选项卡导航系统的最佳方式（无图像）
【发布时间】：2010-07-14 16:02:03
【问题描述】：

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

【问题讨论】：

不惜一切代价远离负面定位/边距/填充。
@otis 为什么哦为什么！我一直使用负边距。可以很方便。
我不明白您的“对不起，它们褪色了”的评论；你是不是让这张照片在阳光下太久了？
@thomasfedb 哇，经过一些研究，我想它们并没有我想象的那么糟糕。我只记得在学习 css 时每个人都会说要避免它们。事实证明，他们现在更被接受了。去图吧。
@lord，我们所做的原始设计真的很褪色，很难看到 - 我们对其进行了改造，以便更容易看到，但我只是稍微道歉，以防人们紧张地看到轮廓。

标签： javascript html css xhtml tabs

【解决方案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 来移动“活动”类，如果你想要花哨的转换。

在此处查看实际操作：http://jsfiddle.net/V8CK4/

【讨论】：

谢谢，效果很好！当我提交它时，我会告诉你我最终得到了什么。

【解决方案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 列表样式设置为 none。

【讨论】：

我喜欢这个解决方案，我自己也用过。但是你应该注意它需要display: inline。
Persoanlly 我相信将内部 div 放置到位会有点混乱。此外，这可能会在非 JS 浏览器中降级，不如我在下面描述的解决方案。
是的 thomas 你的解决方案降级得更好。

【解决方案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 选择器，可以删除一些类。

【讨论】：

如果可以的话，我还建议你使用 jQuery 或类似的 js。
感谢您的评论，您将如何将选定的选项卡向下移动，使其与 InnerContainer 的底部重叠 1px，使它们看起来像一个整体？绝对定位，负边距？
我会给那个 li 一个负的 -1px 下边距，或 1px 的上边距。我会保持一切都是相对的。

【解决方案4】：

我认为问题是在不使用太多代码的情况下使选项卡和它下面的栏看起来像一个整体。

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

像这样：

我。无补丁

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

二。带补丁

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

您只需要使用z-indexes 即可使其正常工作。通过使用position: absolute 和足够高的top 值，补丁可以扩展到它包含的标签div。

更新：演示

http://jsfiddle.net/7GJaW/

【讨论】：

这似乎过于凌乱且没有语义，如果它可以在没有多余元素的情况下实现，你为什么不呢？
首先，您的示例不包括圆形边框。我的解决方案很好地解决了这个问题。而且它既不混乱也不无语义（这到底是什么意思？）。我在 jsfiddle.net 上发布了一个演示链接

【解决方案5】：

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

链接 1
- 链接 1 项目 1
- 链接 1 项目 2

但是，如果您不尝试进行下拉菜单...

【讨论】：

这正是我使用的，除了 div 在这个例子中会更好。加上它易于通过 javascript/jquery 操作嵌套元素。