如何使用HTML CSS制作UL选项卡

时间:2012-01-03 05:35:13

标签: 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>

3 个答案:

答案 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并显示它。

小提琴:http://jsfiddle.net/uFALn/18/

答案 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;
});