Question

我有一个带有一些链接的div我希望用户可以通过

进行选项卡

<a href="#" class="skip-to">show</a>
<div id="skip-to-section-container">
    <a href="[[~[[*id]]]]#skip-to-content">Skip to main content</a>
    <a href="[[~[[*id]]]]#skip-to-navigation">Skip to Navigation</a>
    <a href="[[~[[*id]]]]#skip-to-footer">Skip to Footer</a>
</div>

它是可访问性的，所以我希望第一个tabindex打开div并让它保持打开状态，同时用户通过其中的链接进行选项卡。

这是CSS：

#skip-to-section-container {
    padding: 18px;
    position:absolute;
    top:-161px;
    left:0px;
    color: #fff;
    border-right: 1px solid #3AB652;
    border-bottom: 1px solid#3AB652;
    /* border-bottom-right-radius:8px; */
    background: #3AB652;
    z-index:999999;
    }

#skip-to-section-container a {
    color:#fff;
    display: block;
    font-size: 1.2em;
    margin: 10px;
    font-weight: 600;
    }

a.skip-to {position: absolute; top: -50px;}

a.skip-to:focus + #skip-to-section-container {
    top: 0px;
}

所以我有两个问题，它打开很好，但是： - 如果用户第二次按Tab键，则.skip-to链接失去焦点[显然]并允许div再次隐藏。 - 如果用户试图点击div中的其中一个链接，则.skip-to再次失去焦点，div关闭，链接无法点击。

如何解决这个结束div问题？

如何在tabindex上打开div，并在使用CSS标记其内容时保持打开状态

0 个答案: