如何使UL标签只与HTML CSS [英] How to make UL Tabs with only HTML CSS
问题描述
尝试找出如何做到这一点。我有风格，但我想要点击标签后发生的事情。我希望带有选项卡类名称的div在我单击选项卡时显示和隐藏。我假设这将如何工作。现在，当我单击选项卡什么都没有发生。
这是我的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>说明< / a>< / li>
< li>< a href =＃tab2>规格< / 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 =tab2style =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>
这应该真的出现在一个新行。
< / div>
< / body>
标准答案：您不能。没有办法这样做纯粹的HTML / CSS2，不幸的是。我们可以使用：hover psuedo-class在CSS中创建下拉列表，但是没有点击的等价物。查看其中一个基于Javascript的解决方案。
秘密答案：CSS3 [kind of]支持此功能。但你必须创建单选按钮[奇怪]，它不支持在IE7 / 8。 如果你敢...
如果你不介意使用Javascript，这里有一个快速的解决方案。重新格式化您的HTML，首先。不需要在< div> 中放置< h2> ，并使用 < br /> 用于休息 - 这就是它的用途。此外，我更改了标签< div> s以使用id而不是类。如果您有元素的唯一标识符，请使用 id 。
; ul class =tabs>
< li>< a href =＃tab1>说明< / a>< / li>
< li>< a href =＃tab2>规格< / a>< / li>
< / ul>
< div class =pane>
< div id =tab1>
< h2> Hello< / h2>
< p> Hello hello hello。< / p>
< p>再见再见，再见< / p>
< / div>
< div id =tab2style =display：none;>
< h2> Hello2< / h2>
< p> Hello2 hello2 hello2。< / p>
< p> Goodbye2 goodbye2，goodbye2< / p>
< / div>
< / div>
< div class =content>这应该真的出现在一个新行。< / div>
没有触摸你的CSS。
对于Javascript，我建议使用 jQuery 。 真的简化了事情。
所有你需要的是这些代码行：
$（document）.ready（function（）{
$（ul.tabs a）。click（function（）{
$（pane div）。hide（）;
$（this）.attr ））。show（）;
}）;
}）
基本上，一旦页面准备好[已加载]，查找每个链接，一个标签 ul 的子项。附加每次单击此链接时运行的函数。当点击所述链接时，隐藏 .pane div中的所有标签。然后，使用链接的 href 找到正确的选项卡div并显示它。
fiddle： http://jsfiddle.net/uFALn/18/
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.
Here's my 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>
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 :hover psuedo-class, but there's no equivalent for clicks. Look into one of these Javascript-based solutions.
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...
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.
<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.
For Javascript, I recommend using jQuery. It really simplifies things. All you need are these lines of code:
$(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 .pane div. Then, use the link's href to find the proper tab div and show it.
fiddle: http://jsfiddle.net/uFALn/18/
这篇关于如何使UL标签只与HTML CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
