极客教程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元素作为画廊的主要容器。在这里面，我们有一个ul元素，其类别为tabs，用来创建标签。ul元素中的每个li元素代表一个单独的标签。tab-content div元素包含了每个tab被点击时显示的图像。在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元素中删除了默认的列表样式，并将其显示方式设置为flex。这使得我们可以很容易地将标签水平对齐。我们还为标签类设置了光标为指针，这样用户就知道标签是可以点击的。
我们还为tab.active类添加了一个背景颜色，这样活动的tab就会被突出显示。我们还将标签内容设置为默认隐藏，只显示与活动标签相对应的标签窗格。
第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完全加载后执行。标签类也得到了一个点击事件监听器，每当一个标签被点击，它就会被激活。我们首先从事件监听器内的每一个标签和标签窗格中删除活动类。然后，被点击的标签和相关的标签窗格都将收到活动类。
例子
<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元素添加一个数据属性，该属性对应于它所链接的标签窗格的ID。