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

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 {&nbsp; display: none;}/* Show the one that's active */.nav-item .active span {&nbsp; 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">&nbsp; <div class="col-lg columnBlock">&nbsp; &nbsp; <ul class="nav nav-tabs" role="tablist">&nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link" data-toggle="tab" href="#Content1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="fas fa-bell text-warning"></i>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- tab icon -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>Tab1</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- tab text-->&nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link active" data-toggle="tab" href="#Content2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="fas fa-info text-primary"></i>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>Tab2</span>&nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link" data-toggle="tab" href="#Content3">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="fas fa-server text-primary"></i>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>Tab3</span>&nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; </ul>&nbsp; &nbsp; <div class="tab-content">&nbsp; &nbsp; &nbsp; <div id="Content1" class="tab-pane hide">&nbsp; &nbsp; &nbsp; &nbsp; Some content&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div id="Content2" class="tab-pane active">&nbsp; &nbsp; &nbsp; &nbsp; More content&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div id="Content3" class="tab-pane hide">&nbsp; &nbsp; &nbsp; &nbsp; Some more content&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div>