Html 是否在li标签上使用活动标签？

我已经使用ul li和标签设置了选项卡式导航。我一直在努力使我的li标签高亮显示，并在单击后保持高亮显示。由于它们未设置为HREF，通常的主动策略不起作用。结构如下：

    <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>

因此，悬停显示正确的颜色。我只是不能让颜色保持一次点击。一旦解决了这个问题，我还希望当访问者第一次到达页面时，第一个选项卡被突出显示

这个页面是建立使用引导，但我不能使用引导导航标签或药丸，所以不得不使用这个解决方案

您需要使用

选项卡索引

才能使用

：焦点

添加

选项卡索引将使元素可聚焦

如果要突出显示第一个选项卡，则可以为第一个选项卡提供一个类

.亮点{
背景：#eeeeee；
}

或者你可以写

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



.tabs标签：焦点，.tabs标签：悬停{
背景：#eeeeee；
}
.标签{
显示：块；
保证金：5px0；
填充：5px0；
}


航运
退换商品
尺寸
联系我们
付款
常见问题


内容


在那里犯了一个错误。我没有使用焦点，我使用的是悬停，这很有魅力。当用户点击标签时，背景颜色保持不变。像a：对于hrefs是活动的。你是说通过做出这些改变，这将实现这一目标吗？准备尝试。：）您可以像这样组合悬停和焦点状态-.tabs标签：焦点，.tabs标签：悬停{background:#eeeeee；}查看更新的代码段。啊！那真有魅力！你知道如何将第一个标签设置为焦点吗？@Andrew嗨，是的。答案将再次更新。请看一看：）看看这把小提琴，它的工作原理就像一个梦，只是它即使在点击下一个标签时也会保持专注。
.tab label:first-child{
  background: #eeeeee;
}