<nav class="gnavi">
  <ul>
    <li>
      <a>
        gnaviの
      </a>
    </li>
    <li class="gnavi__active">
      <a>
        枠線が
      </a>
    </li>
    <li>
      <a>
        にごる
      </a>
    </li>
  </ul>
</nav>

.gnavi {
  ul {
    display: flex;
    list-style: none;
  }
  li {
    &:last-child a {
      border-right: #65717B 4px solid;
    }
 
    &.gnavi__active {
      color: #6dbeaf;
      a {
        border: #3EA8FF 4px solid;
        color: #000000D1;
      }
 
      &+li a {
      border-left: none;
      }
    }
  }

  a {
    display: flex;
    justify-content: center;
    align-items: center;
    border: #65717B 4px solid;
    border-right: none;
    height: 60px;
    width:100px;
    font-weight: 700;
    color: #65717B;
    &:hover {
      color: #000000D1;
    }
  }
}

const navItems = document.querySelectorAll('.gnavi li');

navItems.forEach(item => {
  item.addEventListener('click', () => {
    navItems.forEach(navItem => {
      navItem.classList.remove('gnavi__active');
    });

    item.classList.add('gnavi__active');
  });
});