有人可以帮我在 javascript 中写这个吗

Question

I am trying to write this code in javascript from jquery

I already tried but cant seems to get equivalent to work.

$(document).ready(function() {

  $('a').click(function() {

    var selected = $(this);
    $('a').removeClass('active');
    $(selected).addClass('active');
  });

  var $a = $('.a'),
    $b = $('.b'),
    $c = $('.c'),
    $d = $('.d'),
    $home = $('.home'),
    $about = $('.about');

  $a.click(function() {

    $home.fadeIn();
    $about.fadeOut();
  });

  $b.click(function() {

    $home.fadeOut();
    $about.fadeIn();
  });
});

The code works perfect in jQuery, but am trying to just use javascript. Its basically to add and remove class when a nav item is selected. I don't know if am explaining as clear as possible but am try to write the equivalent of this in javascript.

This is what I have tried.

var callback = function(){

 var clickHandler1 = function() { 

        document.getElementById("home").classList.remove("home"); 

       //var rem = document.getElementById("home");
       //fadeOut(rem);
       //alert("I am clicked B");
};

var anchors1 = document.getElementsByClassName("b");
for (var i = 0; i < anchors1.length; i++) {
        var current = anchors1[i];
        current.addEventListener('click', clickHandler1, false);
}

function fadeOut(el){
    el.style.opacity = 1;

    function fade() {
        if ((el.style.opacity -= .1) < 0) {
             el.style.display = "none";
        } else {
             requestAnimationFrame(fade);
          }
        })();
    };              

    fadeIn(el, display){
        el.style.opacity = 0;
        el.style.display = display || "block";

        (function fade() {
             var val = parseFloat(el.style.opacity);
             if (!((val += .1) > 1)) {
                 el.style.opacity = val;
                 requestAnimationFrame(fade);
             }
        })();
    };


 }

 if ( document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll)) {

  callback();

} else {

    document.addEventListener("DOMContentLoaded", callback);

}

Answer 1

The code in es6:

window.onload = function() {
  const allLinks = document.querySelectorAll('a')

  console.log(allLinks)

  const removeAllClass = () => {
    allLinks.forEach(link => {
      link.classList.remove('active')
    })
  }


  allLinks.forEach(element => {
    element.addEventListener('click', event => {
      removeAllClass()
      element.classList.add('active')
    })
  })

  let $a = document.querySelectorAll('.a'),
  $b = document.querySelectorAll('.b'),
  $home = document.querySelector('.home'),
  $about = document.querySelector('.about');

  $a.forEach(element => {
    element.addEventListener('click', event => {
      $about.classList.remove('fadeIn');
      $home.classList.add('fadeIn');      
    })
  })

  $b.forEach(element => {
    element.addEventListener('click', event => {
      $home.classList.remove('fadeIn');
      $about.classList.add('fadeIn');
    })
  })

}

you can see working on https://codepen.io/rwladyka/pen/qBBBpvy

Answer 2

document.getElementsByClassName('a') is the javascript equivalent of $('.a')