清洁'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伪选择器（即：焦点）进行定位。

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

然而，从实际的角度来看，这并不是那么好。如果内容中的任何内容都是可点击的并且窃取焦点（链接，按钮，输入等），则li将失去焦点并且将被隐藏。

使用一点JavaScript来添加/删除类然后控制什么做和不显示更有意义。