通过单击侧列表菜单在 div 内容之间切换答案

【问题标题】：Toogle between divs content by clicking on side list menu通过单击侧列表菜单在 div 内容之间切换
【发布时间】：2023-04-05 03:15:02
【问题描述】：

我正在尝试通过单击侧边菜单而不重新加载页面来更改 div 的内容，只是为了滑动或淡入。

<div class="albcont">
          <div class="albmenu">
            <ul>
              <li><a href="#gallery">Family</a></li>
              <li><a href="#gallery">Weddings</a></li>
              <li><a href="#gallery">Business</a></li>
              <li><a href="#gallery">Sports</a></li>
              <li<a href="gallery.html">Full Gallery</a></li>
            </ul>
          </div>
          <div class="gallery-chng">

            <div class="grid">
              <div class="slika1 sl"><a href="gallery-family.html"><img src="img1.jpg" alt=""></a></div>
              <div class="slika2 sl"><a href="gallery-family.html"><img src="img2.jpg" alt=""></a></div>
              <div class="slika3 sl"><a href="gallery-family.html"><img src="img3.jpg" alt=""></a></div>
              <div class="slika4 sl"><a href="gallery-family.html"><img src="img4.jpg" alt=""></a></div>
            </div>
          
            *<div class="grid2">
              <div class="slika1 sl"><a href="gallery-weddings.html"><img src="img1-1.jpg" alt=""></a></div>
              <div class="slika2 sl"><a href="gallery-weddings.html"><img src="img2-2.jpg" alt=""></a></div>
              <div class="slika3 sl"><a href="gallery-weddings.html"><img src="img3-3.jpg" alt=""></a></div>
              <div class="slika4 sl"><a href="gallery-weddings.html"><img src="img4-4.jpg" alt=""></a></div>
            </div>*
        </div>
     </div>

CSS：

.gallery-chng {
  width: 75%;
  height: 90%;
}

div.grid {
  width: 75%;
  height: 80%;
  display: grid;
  position: absolute;
  padding: 15px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  row-gap: 3%;
  column-gap: 3%;
  opacity: 0;
}
div.grid2 {
  width: 75%;
  height: 80%;
  display: grid;
  padding: 15px;
  position: absolute;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  row-gap: 3%;
  column-gap: 3%;
  opacity: 0;
}

.sl {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  transition: all 1s;
  color: black;
}
.sl a:hover:after {
  content: "Full Gallery";
  height: 100%;
  width: 100%;
  background-color: rgba(105, 95, 95, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  transition: all 5s ease;
}

所以我的意思是，当我例如在菜单中单击“婚礼”时，我想在 .gallery-chng div 中使用 class="grid" disapere 进行 div 和 class="grid2" apeear 的 div.. . "grid3" for Business....等

我是编码新手，所以任何建议都会有所帮助。我认为它可以通过调整 div 的显示属性来完成，并且应该包含 javascript，但我不知道该怎么做......帮助！ :)

【问题讨论】：

欢迎。你有可以展示的 CSS 吗？

标签： javascript html css

【解决方案1】：

我只使用纯 html、css 和 javascript 制作了一个动画。

toggle.html

<!-- Link to stylesheet which belongs in head element -->
<head>
  <link rel="stylesheet" href="toggle.css">
</head>
<div class="albcont">
  <div class="albmenu">
    <ul id="gallery-links">
      <!-- Add a data gallery attribute so we know which gallery the link corresponds to -->
      <li><a href="#gallery" data-gallery="grid1">Family</a></li>
      <li><a href="#gallery" data-gallery="grid2">Weddings</a></li>
    </ul>
  </div>
  <div class="gallery-chng">
    <!-- Add class of current to div being shown so we can access it with javascript -->
    <div class="grid1 current">
      <!-- Images are from placeholder.com -->
      <div class="slika1 sl"><a href="gallery.html"><img src="https://via.placeholder.com/150?text=Family" alt=""></a></div>
      <div class="slika2 sl"><a href="gallery.html"><img src="https://via.placeholder.com/150?text=Family" alt=""></a></div>
      <div class="slika3 sl"><a href="gallery.html"><img src="https://via.placeholder.com/150?text=Family" alt=""></a></div>
      <div class="slika4 sl"><a href="gallery.html"><img src="https://via.placeholder.com/150?text=Family" alt=""></a></div>
    </div>
  
    <div class="grid2">
      <div class="slika1 sl"><a href="gallery.html"><img src="https://via.placeholder.com/150?text=Weddings" alt=""></a></div>
      <div class="slika2 sl"><a href="gallery.html"><img src="https://via.placeholder.com/150?text=Weddings" alt=""></a></div>
      <div class="slika3 sl"><a href="gallery.html"><img src="https://via.placeholder.com/150?text=Weddings" alt=""></a></div>
      <div class="slika4 sl"><a href="gallery.html"><img src="https://via.placeholder.com/150?text=Weddings" alt=""></a></div>
    </div>
  </div>
</div>
<!-- Link to JavaScript -->
<script src="toggle.js"></script>

toggle.css

/* set all div elements with a class that starts with 'grid' to have 0 opacity */
/* use position absolute so they are all in the same place on the page */

div[class^="grid"] {
  display: flex;
  position: absolute;
  top: 50px;
  left: 10px;
  opacity: 0;
}

/* create animation for div elements with class of current using keyframes */

div.current {
  animation: FadeIn linear 1s 1 forwards;
}

@keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

toggle.js

// Listen for when the DOM has finished loading
window.addEventListener('DOMContentLoaded', () => {

  // Add event listener to the element containing the links by selecting its id
  // This works because of event bubbling
  document.querySelector('#gallery-links').addEventListener('click', (event) => {

    // Check if the clicked element is an anchor tag.
    // We don't want anything to happen if the ul container is clicked
    if (event.target.tagName === 'A') {

      // Find the element with a class of current and remove it
      // Because of the CSS this will cause the element to disappear
      document.querySelector('.current').classList.remove('current');

      // Get the name of the gallery from the data-gallery attribute
      let galleryName = event.target.getAttribute('data-gallery');

      // Select the correct element and add a class of current
      document.querySelector(`.${galleryName}`).classList.add('current');
    }
  });
});

我在代码中加入了 cmets 来解释它们是如何协同工作的。您可以使用 css 关键帧和动画来获得您想要的动画，但这应该可以帮助您入门。如果您想尝试，jQuery 库还提供了一种创建动画的简单方法。以下是一些您可能会觉得有用的链接。如果您有任何问题，请告诉我。

【讨论】：

感谢您的回复和努力的朋友...我马上就来测试这个。希望我能成功。
我设法完成了您写给我的所有事情，并且工作正常。多谢。现在唯一的问题是，当 togle 发生时，悬停选项仅保留在一个 div.grid 上，我通过 class= "sl" 插入了它。并且来自图像的链接始终保持不变。（我编辑了我的问题，所以你可以知道我在说什么，我在为每张图片设置 hreff 时犯了一个错误）
这是因为所有的网格都在同一个地方，所以最后一个加载的网格会响应悬停，即使你看不到它，因为不透明度为 0。尝试添加 z-index > 0 到您的 CSS 中的 .current 类，以便该元素位于顶部。这是一篇讨论 z-index 工作原理的文章。 MDN Z-Index