單擊鏈接時從div中添加/刪除類

Question

我有一個頁面的Web應用程序，包含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 /框架評論和指針。

而且，我召集了一個小的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>

Answer 2

您應該首先將onclick事件處理程序綁定到可以單擊的元素。一旦元素被點擊時，您可以使用刪除類：

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