如何仅使用 HTML CSS 制作 UL 选项卡-前端问题

How to make UL Tabs with only HTML CSS(如何仅使用 HTML CSS 制作 UL 选项卡)

本文介绍了如何仅使用 HTML CSS 制作 UL 选项卡的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

试图弄清楚如何做到这一点.我有这种风格，但我希望在单击选项卡后发生一些事情.我希望在单击选项卡时显示和隐藏带有选项卡类名称的 div.我假设这将如何工作.现在，当我单击选项卡时，没有任何反应.

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.

这是我的 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 无法做到这一点.我们可以使用 :hover 伪类在 CSS 中制作下拉菜单，但没有等效的点击.查看这些基于Javascript的解决方案.

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.

秘密答案: CSS3 [种类] 支持这一点.但是你必须创建单选按钮[奇怪]，它在 IE7/8 中不受支持.如果你敢...

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...

如果您不介意使用 Javascript，这里有一个快速解决方案.首先，重新格式化您的 HTML.无需将 <h2>s 放入 <div>s 中，并使用 <br/> 进行中断——就是这样它的存在.另外，我将标签 <div>s 更改为使用 id 而不是类.如果您有元素的唯一标识符，请使用 id.

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>

没有碰过你的 CSS.

Didn't touch your CSS.

对于 Javascript，我建议使用 jQuery.它真的简化了事情.您只需要这些代码行:

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();
    });
})

基本上，一旦页面准备就绪[已加载]，查找每个标签子标签 ul 的子链接.附加一个每次单击此链接时运行的函数.单击该链接时，隐藏 .pane div 中的所有选项卡.然后，使用链接的 href 找到正确的选项卡 div 并显示它.

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.

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

这篇关于如何仅使用 HTML CSS 制作 UL 选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！