javascript - 清洁 'Tabbing' 系统。 (JavaScript？)

Question

<分区>

Answer 1

从纯学术的方法来说，是可以的。这是一个简单的例子:http://jsfiddle.net/hL3mW/

HTML:

<ul>
    <li tabindex="0">A
        <div class="content">Cookies</div>
    </li><li tabindex="0">B
        <div class="content">Pie</div>
    </li><li tabindex="0">C
        <div class="content">Cake</div>
    </li><li tabindex="0">D
        <div class="content">Candy</div>
    </li>
</ul>
<div class="placeholder"></div>

CSS:

ul {
    margin: 0;
    padding: 0;
}

li {
    display: inline-block;
    padding: 5px 20px;
    background: #9C3;
    border-radius: 5px;
    margin: 0 10px;
}

li div {
    display: none;
}

li:focus div {
    display: block;
}

div.content, div.placeholder {
    background: #CCC;
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    height: 500px;
    z-index: 2;
}

div.placeholder {
    z-index: 1;
}

这利用了这样一个事实，即如果您将 tabindex 分配给任何东西，它就可以获得焦点，然后您可以使用 CSS 伪选择器(即 :focus)来定位焦点。

这基本上使得每个<li>持有一个 div，通常是隐藏的。然后，当父级 li 获得焦点时，div 将显示并绝对定位在我们的目标区域上。我们有一个虚拟占位符只是为了提供适当的背景，然后与可见内容 div 重叠。

但是，从实际的 Angular 来看，这并不是那么好。如果内容中的任何内容都是可点击的并且窃取了焦点(链接、按钮、输入等)，那么 li 将失去焦点并被隐藏。

使用一些 JavaScript 添加/删除类然后控制显示和不显示的内容确实更有意义。