我正在尝试制作一个基于选项卡的布局,如果它处于垂直方向,我可以使用它,但我想让它们水平。单击选项卡时,我想让一个 div
展开,然后选项卡是,我遇到了问题。我还添加了一个用于退出的 X
。这是我的jsFiddle .
<div id="header">
<div id="music"><a href="#">Music</a></div>
<div id="about"><a href="#">About</a></div>
<div id="contact"><a href="#">Contact</a></div>
</div>
<div id="musicinfo">
<p>Music info div</p>
<p id='close'>x</p>
</div>
$("#music").click(function() {
$("#musicinfo").show();
$('#close').click(function() {
$("#musicinfo").hide();
});
});
我没有在我的 fiddle 上添加 jquery,所以这不是它无法工作的原因。所以我会改变我的问题,因为我认为这篇文章仍然会对人们有所帮助。关于如何完成我想要完成的任务有更好的想法吗?
最佳答案
我可以建议一个不使用 jQuery 的更简单的解决方案吗?我真的不明白为什么每个人都想使用它,即使没有必要......(我假设你的问题是如何让选项卡的内容在单击其名称时出现)
<div id="header">
<div id="music" onclick="getElementById('musicinfo').style.display='block';"><a href="#">Music</a></div>
<div id="about"><a href="#">About</a></div>
<div id="contact"><a href="#">Contact</a></div>
</div>
<div id="musicinfo">
<p>Music info div</p>
<p id='close' onclick="getElementById('musicinfo').style.display='none';">x</p>
</div>
关于javascript - CSS显示类型: Tabs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18036992/