Mic*_*iko 2 html css tabs html-lists
试图找出如何做到这一点.我有风格但我想点击标签后会发生一些事情.当我单击选项卡时,我希望显示和隐藏选项卡类名称的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>
标准答案:你不能.遗憾的是,纯HTML/CSS2无法做到这一点.我们可以使用:hoverpsuedo-class 在CSS中制作下拉菜单,但是没有相应的点击次数.查看其中一个基于Javascript的解决方案.
秘密答案: CSS3 [种类]支持这一点.但你必须创建单选按钮[怪异],IE7/8不支持它.如果你敢...
如果您不介意使用Javascript,这是一个快速的解决方案.首先重新格式化您的HTML.不需要将<h2>s 放入s中<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.附加每次单击此链接时运行的函数.单击所述链接后,隐藏.panediv 中的所有选项卡.然后,使用链接href找到正确的tab div并显示它.
小提琴:http://jsfiddle.net/uFALn/18/