第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

在活動(dòng)導(dǎo)航選項(xiàng)卡上顯示圖標(biāo)和文本,僅在非活動(dòng)狀態(tài)下顯示圖標(biāo)

在活動(dòng)導(dǎo)航選項(xiàng)卡上顯示圖標(biāo)和文本,僅在非活動(dòng)狀態(tài)下顯示圖標(biāo)

慕勒3428872 2022-05-26 17:39:31
我有引導(dǎo)程序的選項(xiàng)卡式導(dǎo)航,每個(gè)選項(xiàng)卡中都有字體很棒的圖標(biāo)和文本。當(dāng)標(biāo)簽處于活動(dòng)狀態(tài)時(shí),我希望圖標(biāo)和文本顯示。在非活動(dòng)選項(xiàng)卡上,應(yīng)僅顯示圖標(biāo):<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貢獻(xiàn)1853條經(jīng)驗(yàn) 獲得超9個(gè)贊

我必須在選項(xiàng)卡的文本周圍添加一個(gè)<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>


查看完整回答
反對(duì) 回復(fù) 2022-05-26
  • 1 回答
  • 0 關(guān)注
  • 125 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)