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和position absolute堆叠在彼此之上。此外，除home-section之外的每个部分都有zoomOut transform: scale(0.8)类。

我想要做的是：当点击nav的链接时，我希望相应的部分放大，活动部分缩小，这意味着zoomOut应该删除类，新部分将慢慢淡入（我将解决opacity和所有动画，不要担心。）

我想在纯Javascript中执行此操作，所以请不要使用jQuery / framework注释和指针。

另外，如果你可以：https://jsfiddle.net/h7wturbf/1/

，我会组装一个小小的jsfiddle以便你可以直接进行实验。

提前致谢！

Answer 1

以下是一个简单的javascript示例，使用addEventListener，querySelector和querySelectorAll来捕获和定位链接/部分

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

＆＃13;

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');
    })
  }
})

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

您应首先将onclick事件处理程序绑定到可以单击的元素。单击元素后，您可以使用以下命令删除该类：

this.classList.remove('class-name');

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

2 个答案: