Javascript 编写 HTML/CSS/JS 标签导航系统的最佳方式（无图像）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3248106/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Best way to code an HTML/CSS/JS tab navigation system (no images)
提问by Walker
I'm coding a tab system for my website that must be entirely CSS/HTML/JS (without using any images). Problem is, I keep hacking the code until when I'm finished its just a mess. I don't know whether to use positioning, or float the tabs or what. Basically one of the big problems is that after I take away the bottom-border CSS of the selected tab, I need to move it down 1px so it seamlessly blends with the sorting headers - I don't know whether to use margin: -1px or position: relative/absolute etc. I'd love some advice on a good way to code a tab system like this, so that it can be reused across the website!
我正在为我的网站编写一个标签系统，它必须完全是 CSS/HTML/JS（不使用任何图像）。问题是，我一直在破解代码，直到我完成它只是一团糟。我不知道是使用定位，还是浮动选项卡或什么。基本上最大的问题之一是，在我移除所选选项卡的底部边框 CSS 后，我需要将其向下移动 1px，以便它与排序标题无缝融合 - 我不知道是否使用边距：-1px或位置：relative/absolute 等。我想提供一些关于编写这样的标签系统的好方法的建议，以便它可以在整个网站上重复使用！
回答by thomasfedb
Here's an example with CSS that makes it work:
这是一个使其工作的 CSS 示例：
HTML:
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:
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;
}
It even works without JS (to some degree). You'll still need some JS to move the 'active' class arround and also if you want fancy transitions.
它甚至可以在没有 JS 的情况下工作（在某种程度上）。如果你想要花哨的过渡，你仍然需要一些 JS 来移动“活动”类。
See it in action here: http://jsfiddle.net/V8CK4/
在这里查看它的实际效果：http: //jsfiddle.net/V8CK4/
回答by Capt Otis
I would use divs nested inside a list.
我会使用嵌套在列表中的 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>
Then with css style ul li div to not show. I would use jQuery to show the child divs upon click of the parent li.
然后用css样式ul li div不显示。单击父 li 时，我将使用 jQuery 显示子 div。
EDIT: Thanks to the comment... Note the li's would have to be styled inline so they do not break line after every one. Also set the li list-style to none.
编辑：感谢评论...请注意，li 的样式必须为内联样式，因此它们不会在每个字符后断线。还将 li 列表样式设置为无。
回答by thomasfedb
In my opinion I would write it like this:
在我看来，我会这样写：
<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>
This way will allow you to make it function al least to some extent without Javascipt, degrading nicely in browsers with JS turned off. Some of the classes could be removed if using CSS3 sleectors.
这种方式将允许您在没有 Javascipt 的情况下至少在某种程度上使其功能，在关闭 JS 的浏览器中很好地降级。如果使用 CSS3 选择器，可以删除某些类。
回答by FK82
I assume the problem is to make the tab and the bar below it seem like one piece without using too much code.
我认为问题是在不使用太多代码的情况下使选项卡和它下方的栏看起来像一个整体。
What I have done before is to make the two elements I want to join overlap slightly (or not at all) and then put a third element (in the same color as both other elements) where the overlap is. This acts as a kind of patch.
我之前所做的是让我想加入的两个元素稍微重叠（或根本不重叠），然后在重叠的地方放置第三个元素（与其他元素的颜色相同）。这是一种补丁。
Like this:
像这样：
I. without patch
一、无补丁
_________________
| |
| tab |
__|_________________|________________________________
| |
| menu bar |
|_____________________________________________________|
II. with patch
二、带补丁
_________________
| tab |
|- - - - - - - - -|
___| patch |_______________________________
| - - - - - - - - - |
| menu bar |
|_____________________________________________________|
You will only need to use z-indexesto make this work properly. The patch may extend over the tab div it is contained in by using position: absoluteand an adequately high value for top.
您只需要使用z-indexes即可使其正常工作。通过使用position: absolute和 足够高的值，补丁可以扩展到它所包含的选项卡 div 上top。
Update: demonstration
更新：演示
回答by Louis Stephens
Like @Otis mentioned, nesting is a pretty good technique. I usually nest ul's
就像@Otis 提到的那样，嵌套是一种非常好的技术。我通常嵌套 ul's
- Link 1
- Link 1 Item 1
- Link 1 Item 2
- Link 1
- Link 1 Item 1
- Link 1 Item 2
However, if you are not trying to attempt to do a dropdown...
但是，如果您不想尝试进行下拉...
