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>