javascrip : toggle

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="box-1 flex flex-jc-c flex-ai-c height-100vh bg-red">
  <nav></nav>
  <nav></nav>
  <nav></nav>
  <nav></nav>
  <nav></nav>
  <nav></nav>
  <nav></nav>
  <nav></nav>
  <nav></nav>
  <nav></nav>
</div>

body {
  margin:0;
}

.flex {
  display:flex;
}

.flex-jc-c {
  justify-content:center;
}

.flex-ai-c {
  align-items:center;
}

.height-100vh {
  height:100vh;
}

.bg-red {
  background-color:red;
}

.box-1 > nav {
  width:90px;
  height:90px;
  background-color:gold;
  cursor:pointer;
}

.box-1 > nav:nth-child(2n) {
  background-color:blue;
}

.box-1 > nav.active {
  background-color:black;
}

console.clear();
// v1
/*
$('.box-1 > nav').click(function() {
  $('.box-1 > nav').addClass('active');
});
*/

// v2
/*
$('.box-1 > nav').click(function() {
  $(this).addClass('active');
});
*/

// v3
/*
$('.box-1 > nav').click(function() {
  $(this).toggleClass('active');
});
*/

// v4
$('.box-1 > nav').click(function() {
  let has = $(this).hasClass('active');
  
  if ( has ) {
    $(this).removeClass('active');
  }
  else {
    $(this).addClass('active');
  }
});