极客笔记JavaScript 如何创建一个标签图片库
创建一个标签图片库是展示网站上的一系列图片的好方法。按照本教程中所述的步骤，您可以使用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类的光标设置为指针，以便用户知道可以点击选项卡。
我们还为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类也使用了点击事件监听器，每当点击一个tab时，它就会被激活。 在事件监听器中，我们首先从每个tab和tab-pane中删除active类。然后，被点击的tab和相关的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元素添加一个与其链接的tab-pane的ID相对应的数据属性。