数据结构
网络
关系型数据库管理系统
操作系统
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+ 浏览量
广告