add red border to one item at a time?-CodePudding

I made a side navigation with four items. When an item is clicked a red border displays to show that it is active and when it is clicked again, the border disappears.

However, what I want is for just one border to show at a time instead of more than one border showing for any item clicked.

const cards = document.querySelectorAll('.main_list_item');
cards.forEach((card) => {
  const num_btn = card.querySelector('.menu_header')
  num_btn.addEventListener('click', () => {
    if (!card.classList.contains('active')) {
      card.classList.add('active');
    } else {
      card.classList.remove('active');
    }
  })
})

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
}

body {
  font-family: 'Ebrima';
  background-color: #444444;
}

nav#nav_menu_query_off {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100vh;
  background-color: #222222;
  overflow: auto;
  z-index: 2;
  padding: 20px 0 20px 20px;
}

nav#nav_menu_query_off menu#main_menu li.main_list_item div.menu_header {
  text-transform: uppercase;
  padding-bottom: 10px;
}

nav#nav_menu_query_off menu li {
  color: #f0f0f0;
}

nav#nav_menu_query_off menu#main_menu li.main_list_item:not(:first-child) {
  padding-top: 20px;
}

.active {
  border-bottom: 1px solid red;
}

nav::-webkit-scrollbar {
  display: none;
}

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>side nav</title>
</head>

<body>
  <nav id="nav_menu_query_off">
    <menu id="main_menu">
      <li >
        <div >menu one</div>
        <div >
          <menu ></menu>
          <menu ></menu>
          <menu ></menu>
        </div>
      </li>
      <li >
        <div >menu two</div>
        <div >
          <menu ></menu>
          <menu ></menu>
          <menu ></menu>
        </div>
      </li>
      <li >
        <div >menu three</div>
        <div >
          <menu ></menu>
          <menu ></menu>
          <menu ></menu>
        </div>
      </li>
      <li >
        <div >menu four</div>
        <div >
          <menu ></menu>
          <menu ></menu>
          <menu ></menu>
        </div>
      </li>
    </menu>
  </nav>
</body>

</html>

Please, help me solve this.

CodePudding user response：

Just clear all previous active class on all .main_list_item before adding the current one.

const cards = document.querySelectorAll('.main_list_item');
cards.forEach((card) => {
  const num_btn = card.querySelector('.menu_header')
  num_btn.addEventListener('click', () => {
    if (!card.classList.contains('active')) {
    
    // Clear all borders
    cards.forEach((card)=> card.classList.remove('active'))
    
      card.classList.add('active');
    } else {
      card.classList.remove('active');
    }
  })
})

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
}

body {
  font-family: 'Ebrima';
  background-color: #444444;
}

nav#nav_menu_query_off {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100vh;
  background-color: #222222;
  overflow: auto;
  z-index: 2;
  padding: 20px 0 20px 20px;
}

nav#nav_menu_query_off menu#main_menu li.main_list_item div.menu_header {
  text-transform: uppercase;
  padding-bottom: 10px;
}

nav#nav_menu_query_off menu li {
  color: #f0f0f0;
}

nav#nav_menu_query_off menu#main_menu li.main_list_item:not(:first-child) {
  padding-top: 20px;
}

.active {
  border-bottom: 1px solid red;
}

nav::-webkit-scrollbar {
  display: none;
}

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>side nav</title>
</head>

<body>
  <nav id="nav_menu_query_off">
    <menu id="main_menu">
      <li >
        <div >menu one</div>
        <div >
          <menu ></menu>
          <menu ></menu>
          <menu ></menu>
        </div>
      </li>
      <li >
        <div >menu two</div>
        <div >
          <menu ></menu>
          <menu ></menu>
          <menu ></menu>
        </div>
      </li>
      <li >
        <div >menu three</div>
        <div >
          <menu ></menu>
          <menu ></menu>
          <menu ></menu>
        </div>
      </li>
      <li >
        <div >menu four</div>
        <div >
          <menu ></menu>
          <menu ></menu>
          <menu ></menu>
        </div>
      </li>
    </menu>
  </nav>
</body>

</html>