试图找出如何做到这一点。我有风格但我想点击标签后会发生一些事情。当我单击选项卡时,我希望显示和隐藏选项卡类名称的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">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>
答案 0 :(得分:6)
标准答案:你不能。遗憾的是,纯HTML / CSS2无法做到这一点。我们可以使用:hover
psuedo-class在CSS中制作下拉菜单,但是没有等效的点击次数。查看其中一个Javascript-based solutions。
秘密答案: CSS3 [种类]支持此功能。但你必须创建单选按钮[怪异],IE7 / 8不支持它。 If you dare...
如果你不介意使用Javascript,这是一个快速的解决方案。首先重新格式化您的HTML。无需将<h2>
放在<div>
中,并使用<br />
进行休息 - 这就是它的用途。另外,我更改了标签<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>
没碰到你的CSS。
对于Javascript,我建议使用jQuery。 真的简化了事情。 您只需要这些代码行:
$(document).ready(function() {
$("ul.tabs a").click(function() {
$(".pane div").hide();
$($(this).attr("href")).show();
});
})
基本上,一旦页面准备就绪[已加载],请查找标签ul
的子项的每个链接。附加每次单击此链接时运行的函数。单击所述链接后,隐藏.pane
div中的所有选项卡。然后,使用链接的href
找到正确的制表符div并显示它。
答案 1 :(得分:0)
由于浮动的<li>
元素,您的<ul>
元素的高度为零。
尝试将ul { overflow: auto; }
和div.content { clear: both; }
添加到您的CSS
答案 2 :(得分:0)
谢谢benesch。它也帮助了我。
还可以添加return false
以防止跳转到锚点。例如:
$("ul.tabs a").click(function() {
$(".pane div").hide();
$($(this).attr("href")).show();
return false;
});