亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在活動導航選項卡上顯示圖標和文本,僅在非活動狀態下顯示圖標

在活動導航選項卡上顯示圖標和文本,僅在非活動狀態下顯示圖標

慕勒3428872 2022-05-26 17:39:31
我有引導程序的選項卡式導航,每個選項卡中都有字體很棒的圖標和文本。當標簽處于活動狀態時,我希望圖標和文本顯示。在非活動選項卡上,應僅顯示圖標:<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>
查看完整描述

1 回答

?
暮色呼如

TA貢獻1853條經驗 獲得超9個贊

我必須在選項卡的文本周圍添加一個<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>


查看完整回答
反對 回復 2022-05-26
  • 1 回答
  • 0 關注
  • 128 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號