Javascript 组合多个for循环以在单击时删除类

我正在寻找一些关于在一个javascript语句中使用2-3 for循环来查找具有特定类的元素，然后添加和删除类的建议。我对javascript相当陌生，所以请容忍我

到目前为止我所做的一切都是有效的，但我只是不想养成坏习惯。例如，我有一个导航链接，它的类是to--kenya，还有另一个元素具有相同的类，当单击这两个元素中的任何一个时，我希望发生相同的事情，即将一个活动的--section类添加到名为kenya的关联节中

第一个for循环将查找类名为--kenya的所有元素，并向它们添加一个click侦听器。如果这两个元素都没有类active--section，那么它将运行另一个for循环，查找所有具有类active--section的部分，如果具有该类，则将其删除。然后，第三个for循环运行，检查所有导航链接，以查找带有active--link类的链接，如果有，则将其删除。完成后，我只需将一个类添加到新的活动导航链接，并将active--section类添加到现在活动的部分

希望这有意义，我只是在寻找最干净的方法

 <main class="main__wrapper">

  <nav class="navigation">
    <div class="navigation__inner">
      <div class="navigation__logo">
        <a href="#" class="navigation__logo--text">Safari</a>
      </div>
      <ul class="navigation__destinations">
        <li class="navigation__destinations--item">
          <a href="#" class="navigation__link to--home active--link">Home</a>
        </li>
        <li class="navigation__destinations--item">
          <a href="#" class="navigation__link navigation__link--kenya to--kenya">Kenya</a>
        </li>
        <li class="navigation__destinations--item">
          <a href="#" class="navigation__link to--botswana">Botswana</a>
        </li>
        <li class="navigation__destinations--item">
          <a href="#" class="navigation__link to--south-africa">South Africa</a>
        </li>
        <li class="navigation__destinations--item">
          <a href="#" class="navigation__link to--zambia"></a>
        </li>
      </ul>
      <ul class="navigation__list">
        <li class="navigation__item">
          <a href="#" class="navigation__link to--contact">Contact</a>
        </li>
      </ul>
    </div>
  </nav>

<div class="up__next">
      <div class="up__next__box up__next--kenya to--kenya up__next__box--active">
        <div class="up__next__content">
          <div class="up__next__info">
            <h4 class="up__next__heading">Next</h4>
            <span class="up__next__text">Kenya - Maasai Mara National Reserve</span>
          </div>
        </div>
        <div class="up__next__img">
          <div class="up__next__img--kenya"></div>
        </div>
      </div>
</div>

  <section class="home sections active--section">
    <div class="home__info__box">
      <h2 class="heading__primary home__heading--primary">Heading</h2>
      <span class="home__info__box--text">text</span>
    </div>
  </section>

  <section class="kenya sections">
    <div class="kenya__info__box">
      <h2 class="heading__primary kenya__heading--primary">Masai Mara</h2>
      <span class="kenya__info__box--text">text</span>
    </div>
  </section>
</main>


//Global variables

var sections = document.querySelectorAll('.sections');
var navLink = document.querySelectorAll('.navigation__link');
var navHome = document.querySelector('.navigation__link--home');
var navKenya = document.querySelector('.navigation__link--kenya');
var home = document.querySelector('.home');
var kenya = document.querySelector('.kenya');
var toKenya = document.querySelectorAll('.to--kenya');
var upNextKenya = document.querySelector('.up__next--kenya');


//Event listeners

for (var i = 0; i < toKenya.length; i++) {
    toKenya[i].addEventListener('click', function () {
        if (!kenya.classList.contains('active--section')) {
            for (var s = 0; s < sections.length; s++) {
                sections[s].classList.remove('active--section');
            }
            for (var l = 0; l < navLink.length; l++) {
                navLink[l].classList.remove('active--link');
            }
            kenya.classList.add('active--section');
            navKenya.classList.add('active--link');
            upNextKenya.classList.remove('up__next__box--active');
        }
    });
}

下一个
肯尼亚-马赛马拉国家保护区
标题
文本
马赛马拉
文本
//全局变量
var sections=document.querySelectorAll（'.sections'）；
var navLink=document.querySelectorAll（'.navigation\uu link'）；
var navHome=document.querySelector（'.navigation\uu link--home'）；
var navKenya=document.querySelector（'.navigation\uu link--kenya'）；
var home=document.querySelector（'.home'）；
var kenya=document.querySelector（'.kenya'）；
var toKenya=document.querySelectorAll（'.to--kenya'）；
var upNextKenya=document.querySelector（'.up_uunext--kenya'）；
//事件侦听器
for（var i=0；i

这个问题应该转移到无需使用嵌套循环循环所有元素，只需使用jquery选择器，然后添加css类$（'.navigation\uu link to--home'）。addClass（'Active'）jquery选择器将解决您的问题issue@HishamOP问题中没有jQuery标记，因此不是option@Caffeinated.tech可能想看看。。。