javascript - 单击链接时从 div 添加/删除类

Question

我有一个页面网络应用程序，包含 5 个链接导航和 5 个部分。结构是这样的:

<div class="main-nav">
        <ul>
            <li><a href="#home-section">Home</a></li>
            <li><a href="#about-section">About</a></li>
            <li><a href="#skills-section">Skills</a></li>
            <li><a href="#contact-section">Contact</a></li>
            <li><a href="#ps-section">P.S.</a></li>
        </ul>
    </div>
    <div class="home-section">
        <div class="home-section--greeting">
            <p>Hi, I'm</p>
            <p>T. Green</p>
        </div>
    </div>
    <div class="about-section zoomOut">

    </div>
    <div class="skills-section zoomOut">

    </div>
    <div class="contact-section zoomOut">

    </div>
    <div class="ps-section zoomOut">

    </div>

页面加载时，每个部分都位于 home-section 后面。这些部分以 100vh 和 绝对位置 相互堆叠。此外，除了 home-section 之外的每个部分都有带有 transform:scale(0.8) 的 zoomOut 类。

我想做的是:当点击nav中的链接时，我希望相应的部分放大，事件部分缩小，这意味着 >zoomOut 类应该被删除，新的部分将慢慢淡入(我将解决 opacity 和所有动画，不用担心)。

我想用纯 Javascript 来完成此操作，所以请不要使用 jQuery/框架注释和指针。

另外，我组装了一个小jsfiddle，这样你就可以直接进行实验，如果可以的话:https://jsfiddle.net/h7wturbf/1/

提前致谢!

Answer 1

这是一个简单的 JavaScript 示例，使用 addEventListener , querySelector和 querySelectorAll捕获并定位链接/部分

我添加了一个 zoomIn 类来简化如何切换部分

window.addEventListener('load', function() {
  var links = document.querySelectorAll('.main-nav a');
  for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click', function(e) {
      var divtarget = e.target.href.split('#')[1];
      document.querySelector('.zoomIn').classList.remove('zoomIn');
      document.querySelector('.' + divtarget).classList.add('zoomIn');
    })
  }
})

html,
body {
  height: 100%;
  font-family: 'Yanone Kaffeesatz', sans-serif;
}
.zoomOut {
  transform: scale(0);
}
.zoomIn {
  transform: scale(0.8);
}
.home-section {
  height: 100vh;
  background-color: yellow;
}
.home-section .home-section--greeting {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 62px;
  color: #005168;
}
.about-section {
  position: absolute;
  height: 100vh;
  top: 0;
  width: 100%;
  background-color: dodgerblue;
}
.skills-section {
  position: absolute;
  height: 100vh;
  top: 0;
  width: 100%;
  background-color: rebeccapurple;
}
.contact-section {
  position: absolute;
  height: 100vh;
  top: 0;
  width: 100%;
  background-color: aqua;
}
.ps-section {
  position: absolute;
  height: 100vh;
  top: 0;
  width: 100%;
  background-color: forestgreen;
}
.main-nav {
  position: fixed;
  top: 50%;
  transform: translate(0, -50%);
  font-size: 21px;
  left: 0px;
  z-index: 999;
}
.main-nav ul li {
  margin: 8px 0 8px 0;
  list-style-type: none;
}
.main-nav ul li a {
  text-decoration: none;
  color: #4F96AA;
  transition: color 0.2s ease-in;
}
.main-nav ul li a:hover {
  color: #65AABD;
}
.main-nav ul li a.about:active ~ #about-section {
  display: none;
}

<div class="main-nav">
  <ul>
    <li><a href="#home-section">Home</a>
    </li>
    <li><a href="#about-section">About</a>
    </li>
    <li><a href="#skills-section">Skills</a>
    </li>
    <li><a href="#contact-section">Contact</a>
    </li>
    <li><a href="#ps-section">P.S.</a>
    </li>
  </ul>
</div>
<div class="home-section zoomOut zoomIn">
  <div class="home-section--greeting">
    <p>Hi, I'm</p>
    <p>T. Green</p>
  </div>
</div>
<div class="about-section zoomOut">

</div>
<div class="skills-section zoomOut">

</div>
<div class="contact-section zoomOut">

</div>
<div class="ps-section zoomOut">

</div>