清理“制表”系统。(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;
}

这利用了这样一个事实:如果您为任何东西分配了一个表索引，它就可以获得焦点，然后您可以使用CSS伪选择器(即: focus )将其作为目标。

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

然而，从实际的角度来看，这并不是很好。如果内容中的任何内容是可点击的，并且是窃取焦点(链接、图腾、输入等)，那么li将失去焦点并被隐藏。

实际上，使用一个小的JavaScript来添加/删除类就更有意义了，这些类可以控制哪些是显示的，哪些是不显示的。