如何仅使用 HTML CSS 制作 UL 标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8708347/
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
How to make UL Tabs with only HTML CSS
提问by Michiko
Trying to figure out how to do this. I have the style but I'd like something to happen after I click the tabs. I would like the div with the tab class names to show and hide when i click the tabs. I'm assuming how that would work. Right now when I click the tabs nothing happens.
试图弄清楚如何做到这一点。我有这种风格，但我希望在我点击标签后发生一些事情。我希望在单击选项卡时显示和隐藏带有选项卡类名称的 div。我假设这是如何工作的。现在，当我单击选项卡时，什么也没有发生。
Here's my HTML
这是我的 HTML
<style type="text/css">
ul.tabs {
display: table;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.tabs>li {
float: left;
padding: 10px;
background-color: lightgray;
}
ul.tabs>li:hover {
background-color: lightgray;
}
ul.tabs>li.selected {
background-color: lightgray;
}
div.content {
border: 1px solid black;
}
ul { overflow: auto; }
div.content { clear: both; }
</style>
<body>
<ul class="tabs">
<li><a href="#tab1">Description</a></li>
<li><a href="#tab2">Specs</a></li>
</ul>
<div class="pane">
<div class="tab1">
<div><h2>Hello</h2></div>
<div />
<div>Hello hello hello.</div>
<div />
<div>Goodbye goodbye, goodbye</div>
<div />
<div />
</div>
<div class="tab2" style="display:none;">
<div><h2>Hello2</h2></div>
<div />
<div>Hello2 hello2 hello2.</div>
<div />
<div>Goodbye2 goodbye2, goodbye2</div>
<div />
</div>
</div>
<div class="content">
This should really appear on a new line.
</div>
</body>
回答by benesch
Standard answer:you can't. There is no way to do this with purely HTML/CSS2, unfortunately. We can make drop-downs in CSS with the :hoverpsuedo-class, but there's no equivalent for clicks. Look into one of these Javascript-based solutions.
标准答案：你不能。不幸的是，纯 HTML/CSS2 无法做到这一点。我们可以使用:hoverpsuedo-class在 CSS 中创建下拉菜单，但没有等效的点击。查看这些基于 Javascript 的解决方案之一。
Secret answer:CSS3 [kind of] supports this. But you have to create radio buttons [weird], and it's not supported in IE7/8. If you dare...
秘密答案：CSS3 [种类] 支持这一点。但是你必须创建单选按钮[奇怪]，它在 IE7/8 中不受支持。如果你敢...
And if you don't mind using Javascript, here's a quick solution. Reformatted your HTML, first of all. No need to put <h2>s in <div>s, and use <br />for breaks—that's what it's there for. Also, I changed the tab <div>s to use id's instead of classes. If you have unique identifiers for an element, use id.
如果您不介意使用 Javascript，这里有一个快速解决方案。首先，重新格式化您的 HTML。无需将<h2>s放入s 中<div>，并<br />用于休息——这就是它的用途。另外，我将 tab 更改<div>为使用 id 而不是类。如果您有元素的唯一标识符，请使用id.
<ul class="tabs">
<li><a href="#tab1">Description</a></li>
<li><a href="#tab2">Specs</a></li>
</ul>
<div class="pane">
<div id="tab1">
<h2>Hello</h2>
<p>Hello hello hello.</p>
<p>Goodbye goodbye, goodbye</p>
</div>
<div id="tab2" style="display:none;">
<h2>Hello2</h2>
<p>Hello2 hello2 hello2.</p>
<p>Goodbye2 goodbye2, goodbye2</p>
</div>
</div>
<div class="content">This should really appear on a new line.</div>
Didn't touch your CSS.
没有触及你的 CSS。
For Javascript, I recommend using jQuery. It reallysimplifies things. All you need are these lines of code:
对于 Javascript，我建议使用jQuery。它确实简化了事情。您只需要这些代码行：
$(document).ready(function() {
$("ul.tabs a").click(function() {
$(".pane div").hide();
$($(this).attr("href")).show();
});
})
Basically, once the page is ready [has loaded], look for every link that's a child of a tabs ul. Attach a function that runs each time this link is clicked. When said link is clicked, hide all the tabs in the .panediv. Then, use the link's hrefto find the proper tab div and show it.
基本上，一旦页面准备好 [已加载]，请查找属于 tabs 子项的每个链接ul。附加一个每次单击此链接时运行的函数。单击该链接后，隐藏.panediv中的所有选项卡。然后，使用链接href找到正确的选项卡 div 并显示它。
fiddle: http://jsfiddle.net/uFALn/18/
回答by Mujassir Nasir
Because of the floated <li>elements your <ul>element is zero height.
由于浮动<li>元素，您的<ul>元素高度为零。
Try adding ul { overflow: auto; }and div.content { clear: both; }to your CSS
尝试将ul { overflow: auto; }和添加div.content { clear: both; }到您的 CSS
回答by Mujassir Nasir
Thanks benesch. It helped me too.
谢谢贝内施。它也帮助了我。
One can also add return falseto prevent that jerky jump to the anchor. For instance:
还可以添加return false以防止突然跳到锚点。例如：
$("ul.tabs a").click(function() {
$(".pane div").hide();
$($(this).attr("href")).show();
return false;
});
