Question

我使用ul li和标签设置了标签式导航。我一直试图让我的li标签突出显示并在点击时保持突出显示。因为它们没有设置为hrefs，所以通常的主动策略不起作用。以下是结构：

    <ul class="tabs">
    <li class="labels">
        <label class="rounded" for="tab1" id="label1">Shipping</label>
        <label class="rounded" for="tab2" id="label2">Returns</label>
        <label class="rounded" for="tab3" id="label3">Sizing</label>
        <label class="rounded" for="tab4" id="label4">Contact Us</label>
        <label class="rounded" for="tab5" id="label5">Payment</label>
        <label class="rounded" for="tab6" id="label6">FAQ</label>
    </li>
    <li>
        <input type="radio" checked name="tabs" id="tab1">
        <div id="tab-content1" class="tab-content">
            <p>Content</p>
        </div>
    </li>
    </ul>

用于焦点的CSS是：

.tabs label:focus {
    background: #eeeeee;
}

因此，在悬停时，它会显示正确的颜色。一旦点击，我就无法保持颜色。一旦解决了这个问题，我还希望在访问者第一次到达页面时突出显示第一个标签。

此页面是使用bootstrap构建的，但是我无法使用bootstrap nav选项卡或药丸，因此必须使用此解决方案。

Answer 1

您需要使用tab-index才能使用:focus

添加tab-index会使您的元素具有焦点。

如果您想突出显示第一个标签，那么您可以将课程提供给第一个标签

.highlight { 背景：#eeeeee; }

或者你可以写

.tab label:first-child{
  background: #eeeeee;
}

See JSFiddle

.tabs label:focus, .tabs label:hover{
    background: #eeeeee;
}
.tabs label{
  display: block;
  margin: 5px 0;
  padding: 5px 0;
}

<ul class="tabs">
    <li class="labels">
        <label class="rounded" tabindex="0" for="tab0" id="label0">Shipping</label>
        <label class="rounded" tabindex="2" for="tab2" id="label2">Returns</label>
        <label class="rounded" tabindex="3" for="tab3" id="label3">Sizing</label>
        <label class="rounded" tabindex="4" for="tab4" id="label4">Contact Us</label>
        <label class="rounded" tabindex="5" for="tab5" id="label5">Payment</label>
        <label class="rounded" tabindex="6" for="tab6" id="label6">FAQ</label>
    </li>
    <li>
        <input type="radio" checked name="tabs" id="tab1">
        <div id="tab-content1" class="tab-content">
            <p>Content</p>
        </div>
    </li>
    </ul>

在li标签上使用有效？

1 个答案: