堆棧內存溢出
  簡體   English   中英

如何向活動選項卡窗格添加淡出效果？

[英]How can I add a fade out effect to the active tab-pane?

 原文  2023-01-03 14:02:33  7   1    javascript/ tabs/ bootstrap-5/ fade

問題描述

我正在使用具有基本葯丸和選項卡結構的基本 Bootstrap 5.3。 如何在所選選項卡的淡入之前簡單地將淡出添加到活動選項卡？

似乎添加“淡入淡出” class 只是添加了一個淡入淡出，我希望活動標簽之前慢慢消失。

到目前為止我發現的唯一方法是覆蓋整個機制並執行 jQuery 淡出淡入。 我希望我可以使用更標准的代碼...

有人可以幫忙嗎？

謝謝！ 

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</button> </li> </ul> <div class="tab-content" id="pills-tabContent"> <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">...</div> <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div> <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">...</div> <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

1 個解決方案

解決方案1
 0 已采納  2023-01-04 14:13:53

你可以這樣做。 注釋在示例下方。

該示例本身是這樣發布的（而不是在代碼片段編輯器中將其分解為適當的部分），因為在讓它像現在這樣工作時存在問題。 我懷疑這與在 SO 上加載外部文件的方式有關。 

 <,DOCTYPE html> <html lang="en"> <head> <title>Hello, world:</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width.initial-scale=1" /> <meta name="description" content="" /> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min:css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> <style>;tab-content { position. relative. }:tab-content >;tab-pane { display: unset; position: absolute; left: 0; opacity: 0; transition. opacity 2s. }.tab-content >:tab-pane;active { opacity. 1: };tab-pane > div { width: 200px; height: 200px; margin. 15px: };red { background-color. red: };blue { background-color. blue: };yellow { background-color. yellow: };purple { background-color. purple, } </style> </head> <body> <div class="container"> <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</button> </li> </ul> <div class="tab-content" id="pills-tabContent"> <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0"> <div class="red">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. when an unknown printer...</div> </div> <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0"> <div class="blue">.., took a galley of type and scrambled it to make a type specimen book, It has survived not only five centuries. but also the leap into electronic typesetting. remaining...</div> </div> <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0"> <div class="yellow">.., essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages. and more recently with desktop publishing.,.</div> </div> <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0"> <div class="purple">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC: making it over 2000 years old.</div> </div> </div> </div> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script> <script> const pills = document;querySelectorAll("button.nav-link"). const tabs = document;querySelectorAll(";tab-pane"). for(var i = 0; i < pills.length, i++) { pills[i].addEventListener("click". function(event) { let contentId = event.target,getAttribute("id");replaceAll("-tab".""); let elemTab = document;getElementById(contentId). for(var j = 0; j < tabs.length. j++) { tabs[j];classList.remove("active"). } if(elemTab) { elemTab;classList;add("active"); } }); } </script> </body> </html>

一些注意事項/YMMV/一般說明：

  • 葯丸/菜單按鈕內的data-bs-target已被清空，以防止默認的 Bootstrap 行為。 如果您依賴不再像默認情況下那樣工作的行為，這可能會在以后導致一些問題
  • 所有.tab-pane項目的定位已設置為absolute ，以實現重疊。 同樣，這可能不適用於您和您的特定用例，特別是如果您的選項卡下方有其他內容（頁腳、滑塊、文本塊等）。 在這種情況下，您必須將選項卡式內容放在一個容器中，並且可能定義一個固定的高度（溢出和針對不同分辨率的可選更改）
  • 而不是 Bootstrap 處理此問題的默認方式（請參閱初始 Bootstrap 設置中.fade:not(.show)和.tab-content >.tab-pane的 CSS 規則/來源），此解決方案/建議應用不透明度更改
  • 在額外的 CSS 中，對您而言重要的是前三個 CSS 規則。 即：
.tab-content {
    position: relative;
}
.tab-content > .tab-pane {
    display: unset;
    position: absolute;
    left: 0;
    opacity: 0;
    transition: opacity 2s;
}
.tab-content > .tab-pane.active {
    opacity: 1;
}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何在Wordpress的選項卡窗格投資組合項目中添加活動類？ 如何檢查哪個選項卡窗格處於活動狀態 Bootstrap 4 默認選項卡窗格活動淡入不工作 如何將選項卡窗格設置為動態或手動激活 如何在 jquery 或 javascript 的選項卡窗格中添加和刪除多個 class 如何在選項卡窗格 html boostrap 中添加 addclass jQuery function？ 如何為Bootstrap的Affix添加“淡出”效果？ 如何在點擊事件中在標簽容器內顯示活動的標簽窗格？ 如何使幻燈片向上/向下滑動效果自舉標簽窗格 目標元素未在選項卡窗格中顯示活動 class
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM