在活动导航选项卡上显示图标和文本，仅在非活动状态下显示图标

Question

我有引导程序的选项卡式导航，每个选项卡中都有字体很棒的图标和文本。当标签处于活动状态时，我希望图标和文本显示。在非活动选项卡上，应仅显示图标：<div class="row" id="tabbedItemsRow">    <div class="col-lg columnBlock">        <ul class="nav nav-tabs" role="tablist">            <li class="nav-item">                <a class="nav-link" data-toggle="tab" href="#Content1">                    <i class="fas fa-bell text-warning"></i> <!-- tab icon -->                    Tab1  <!-- tab text-->                </a>            </li>            <li class="nav-item">                <a class="nav-link active" data-toggle="tab" href="#Content2">                    <i class="fas fa-info text-primary"></i>                    Tab2                </a>            </li>            <li class="nav-item">                <a class="nav-link" data-toggle="tab" href="#Content3">                    <i class="fas fa-server text-primary"></i>                    Tab3                </a>            </li>        </ul>        <div class="tab-content">            <div id="Content1" class="tab-pane hide">                Some content            </div>            <div id="Content2" class="tab-pane active">                More content            </div>            <div id="Content3" class="tab-pane hide">                Some  more content                            </div>        </div>    </div></div>

Answer 1

我必须在选项卡的文本周围添加一个<span>才能解决它。

/* Hide text in the navigation tabs by default */

.nav-item span {

  display: none;

}

/* Show the one that's active */

.nav-item .active span {

  display: inline-block;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet" />

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="row" id="tabbedItemsRow">

  <div class="col-lg columnBlock">

    <ul class="nav nav-tabs" role="tablist">

      <li class="nav-item">

        <a class="nav-link" data-toggle="tab" href="#Content1">

          <i class="fas fa-bell text-warning"></i>

          <!-- tab icon -->

          <span>Tab1</span>

          <!-- tab text-->

        </a>

      </li>

      <li class="nav-item">

        <a class="nav-link active" data-toggle="tab" href="#Content2">

          <i class="fas fa-info text-primary"></i>

          <span>Tab2</span>

        </a>

      </li>

      <li class="nav-item">

        <a class="nav-link" data-toggle="tab" href="#Content3">

          <i class="fas fa-server text-primary"></i>

          <span>Tab3</span>

        </a>

      </li>

    </ul>

    <div class="tab-content">

      <div id="Content1" class="tab-pane hide">

        Some content

      </div>

      <div id="Content2" class="tab-pane active">

        More content

      </div>

      <div id="Content3" class="tab-pane hide">

        Some more content

      </div>

    </div>

  </div>

</div>