时间戳

首页 > 解决方案 > 使用css引导程序中的自定义活动按钮链接

css - 使用css引导程序中的自定义活动按钮链接

问题描述

我正在尝试在引导程序中自定义选项卡菜单，以便在选择（活动）链接时，它会在彩色框中突出显示。我似乎无法针对 css 中的活动元素。有人可以建议我如何做到这一点吗？html如下：

<div class="col col-md-3">
<div class="nav flex-column nav-pills" id="servicesTab" aria-orientation="vertical">
              <a class="nav-link nav-pill-custom active" id="v-pills-orientation-tab" data-toggle="pill" href="#v-pills-orientation" role="tab" aria-controls="v-pills-orientation" aria-selected="true">Orientation</a>
              <a class="nav-link nav-pill-custom" id="v-pills-education-tab" data-toggle="pill" href="#v-pills-education" role="tab" aria-controls="v-pills-education" aria-selected="false">Education</a>
              <a class="nav-link nav-pill-custom" id="v-pills-investigation-tab" data-toggle="pill" href="#v-pills-investigation" role="tab" aria-controls="v-pills-investigation" aria-selected="false">Investigation</a>
</div>
</div>

这些链接到同一页面上的一些选项卡：

<div class="col col-md-9">
            <div class="tab-content" id="v-pills-tabContent">
              <!-- ORIENTATION TAB-->
              <div class="tab-pane fade show active" id="v-pills-orientation" role="tabpanel" aria-labelledby="v-pills-orientation-tab">
                 <p>...</p>
              </div>
              <!-- EDUCATION TAB-->
               <div class="tab-pane fade" id="v-pills-education" role="tabpanel" aria-labelledby="v-pills-education-tab">
                 <p>...</p>
              </div>
            </div>
</div>

然后类的 cssnav-pill-custom给出如下。

.nav-pill-custom {
    outline:none !important;
    color: #6481A6;
}

.nav-pill-custom:hover {
    background-color:#91cbeb;
    border: #91cbeb;
}

.nav-pill-custom:focus,
.nav-pill-custom:active
 {
    background-color:#91cbeb;
    border: #91cbeb;
}

每个 rthe css 块都可以很好地与针对活动链接的块分开。我也试过没有.nav-pill-custom:focus，我试过添加.nav-pill-custom:active a定位锚，这是另一个stackoverflow问题的解决方案，但它似乎对我不起作用。我该如何进行这项工作？

标签： cssbootstrap-4

解决方案

推荐阅读