資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何建立選項卡圖片庫？
建立選項卡圖片庫是展示網站上圖片集的絕佳方式。透過遵循本教程中概述的步驟，您可以輕鬆地使用 HTML、CSS 和 JavaScript 建立選項卡圖片庫。此相簿可用於顯示各種圖片，例如照片、藝術品，甚至產品圖片。只需一點創意和自定義，您就可以使相簿的外觀和功能完全符合您的期望。
步驟 1：建立 HTML 結構
為了構建選項卡圖片庫，首先必須建立 HTML 結構。將使用 div 元素構建相簿的主容器，並使用 ul 元素生成選項卡。我們將使用 li 元素建立每個選項卡的單個圖片。
<body>
<div id="tabbed-nav">
<div class="tab active" data-target="tab-1">Tab 1</div>
<div class="tab" data-target="tab-2">Tab 2</div>
<div class="tab" data-target="tab-3">Tab 3</div>
</div>
<div id="tabbed-content">
<div id="tab-1" class="images active">
<img src="https://picsum.photos/id/110/200/300" alt="image 1">
<img src="https://picsum.photos/id/156/200/300" alt="image 2">
<img src="https://picsum.photos/id/10/200/300" alt="image 3">
<img src="https://picsum.photos/id/110/200/300" alt="image 1">
</div>
<div id="tab-2" class="images">
<img src="https://picsum.photos/id/114/200/300" alt="image 1">
<img src="https://picsum.photos/id/158/200/300" alt="image 2">
<img src="https://picsum.photos/id/100/200/300" alt="image 3">
<img src="https://picsum.photos/id/110/200/300" alt="image 1">
</div>
<div id="tab-3" class="images">
<img src="https://picsum.photos/id/12/200/300" alt="image 1">
<img src="https://picsum.photos/id/15/200/300" alt="image 2">
<img src="https://picsum.photos/id/107/200/300" alt="image 3">
<img src="https://picsum.photos/id/110/200/300" alt="image 1">
</div>
</div>
</body>
在上面的程式碼中，我們建立了一個帶有類 tab-gallery 的 div 元素作為相簿的主容器。在其中，我們有一個帶有類 tabs 的 ul 元素來建立選項卡。ul 元素中的每個 li 元素都代表一個單獨的選項卡。tab-content div 元素包含在單擊每個選項卡時顯示的圖片。tab-content div 中的每個 tab-pane div 元素都包含一個顯示單個圖片的 img 元素。
步驟 2：新增 CSS 樣式
下一步是向 HTML 結構新增 CSS 樣式，使相簿看起來更美觀。我們將使用 CSS 來設定選項卡和圖片的樣式。
<style>
/* CSS for the tabbed navigation */
.tab {
display: inline-block;
padding: 10px 15px;
margin-right: 10px;
cursor: pointer;
border-bottom: 2px solid transparent;
}
.tab.active {
border-bottom: 2px solid black;
}
/* CSS for the image gallery */
.images {
display: none;
}
.images.active {
display: flex;
flex-wrap: wrap;
}
.images img {
flex: 1;
margin: 10px;
}
</style>
在上面的 CSS 中，我們將 tab-gallery div 的寬度設定為 800px 並將其居中在頁面上。我們還從 tabs ul 元素中刪除了預設列表樣式，並將其 display 屬性設定為 flex。這使我們能夠輕鬆地水平對齊選項卡。我們還將 tab 類的游標設定為 pointer，以便使用者知道選項卡是可點選的。
我們還為 tab.active 類添加了背景顏色，以便突出顯示活動選項卡。並且我們還將 tab-content 預設設定為隱藏，並且僅顯示與活動選項卡對應的 tab-pane。
步驟 3：新增 JavaScript 功能
最後，我們需要向相簿新增 JavaScript 功能，以便它可以在使用者單擊選項卡時更改圖片。我們將使用 jQuery 來簡化 DOM 操作和新增事件監聽器。
<script>
// JavaScript to handle tabbed navigation
const tabs = document.querySelectorAll('.tab');
const images = document.querySelectorAll('.images');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
// Remove active class from all tabs
tabs.forEach(tab => tab.classList.remove('active'));
// Add active class to clicked tab
tab.classList.add('active');
// Hide all image galleries
images.forEach(image => image.classList.remove('active'));
// Show image gallery associated with clicked tab
const target = tab.getAttribute('data-target');
document.getElementById(target).classList.add('active');
});
});
</script>
上面的程式碼中使用了 ready 方法來確保 JavaScript 僅在 DOM 完全載入後才執行。tab 類也獲取了一個 click 事件監聽器，該監聽器在每次單擊選項卡時都會被啟用。我們從事件監聽器中開始刪除每個選項卡和 tab-pane 中的 active 類。然後，單擊的選項卡和關聯的 tab-pane 都將獲得 active 類。
示例
<html>
<head>
<style>
.tab {
display: inline-block;
padding: 10px 15px;
margin-right: 10px;
cursor: pointer;
border-bottom: 2px solid transparent;
}
.tab.active {
border-bottom: 2px solid black;
}
.images {
display: none;
}
.images.active {
display: flex;
flex-wrap: wrap;
}
.images img {
flex: 1;
margin: 10px;
}
</style>
</head>
<body>
<div id="tabbed-nav">
<div class="tab active" data-target="tab-1">Tab 1</div>
<div class="tab" data-target="tab-2">Tab 2</div>
<div class="tab" data-target="tab-3">Tab 3</div>
</div>
<div id="tabbed-content">
<div id="tab-1" class="images active">
<img src="https://picsum.photos/id/110/200/300" alt="image 1">
<img src="https://picsum.photos/id/156/200/300" alt="image 2">
<img src="https://picsum.photos/id/10/200/300" alt="image 3">
<img src="https://picsum.photos/id/110/200/300" alt="image 1">
</div>
<div id="tab-2" class="images">
<img src="https://picsum.photos/id/114/200/300" alt="image 1">
<img src="https://picsum.photos/id/158/200/300" alt="image 2">
<img src="https://picsum.photos/id/100/200/300" alt="image 3">
<img src="https://picsum.photos/id/110/200/300" alt="image 1">
</div>
<div id="tab-3" class="images">
<img src="https://picsum.photos/id/12/200/300" alt="image 1">
<img src="https://picsum.photos/id/15/200/300" alt="image 2">
<img src="https://picsum.photos/id/107/200/300" alt="image 3">
<img src="https://picsum.photos/id/110/200/300" alt="image 1">
</div>
</div>
<script>
// JavaScript to handle tabbed navigation
const tabs = document.querySelectorAll('.tab');
const images = document.querySelectorAll('.images');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
// Remove active class from all tabs
tabs.forEach(tab => tab.classList.remove('active'));
// Add active class to clicked tab
tab.classList.add('active');
// Hide all image galleries
images.forEach(image => image.classList.remove('active'));
// Show image gallery associated with clicked tab
const target = tab.getAttribute('data-target');
document.getElementById(target).classList.add('active');
});
});
</script>
</body>
</html>
需要注意的是，我們需要向每個選項卡 li 元素新增一個 data 屬性，該屬性對應於與其連結的 tab-pane 的 ID。
更新於：2023年3月2日
2K+ 瀏覽量
廣告