Как сделать переключатель языка, и вообще такой элемент?

Question

[12Vadim12]

Не знаю, как сделать элемент, чтобы при нажатие на флаг, он становился основным, но без перехода на новую страницу

<div class="header__languages-arm">
            <img src="img/second_page/ru.svg" alt="ru-lang" class="img-fluid header__lang-img">
            <i class="fa fa-caret-down header__icon-arm" aria-hidden="true"></i>
            <div class="header__lang-block">
              <a href="#" class="header__lang-link1-arm">
                <img src="img/second_page/sha.svg" alt="sha-icon" class="img-fluid lang-sha-icon">
              </a>
              <a href="#" class="header__lang-link2-arm">
                <img src="img/second_page/arm.svg" alt="arm-icon" class="img-fluid lang-arm-icon">
              </a>
            </div>
          </div>

.header__languages-arm {
  text-align: left;
  background-color: #f4f4f4;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  height: 26px;
  width: 62px;
  margin-left: 13px;
  position: relative;
}
.header__lang-img{
  position: absolute;
  left: 11px;
  top:6px;
  width: 20px;
  height: 15px;
  align-items: center;
}
.header__icon-arm{
  position: absolute;
  right: 5px;
  top:5px;
  width: 15px;
  height: 15px;
}
.header__lang-block{
  display: none;
  position: absolute;
  top:25px;
  background-color:#E1E1E1;
  width: 63px;
  &.active{
    display: block;
  }
}
.header__lang-link1-arm,
.header__lang-link2-arm{
  position: relative;
  width: 63px;
  height: 27px;
  background-color: #f4f4f4;
  display: block;
  &:hover{
    background-color: grey;
  }
}
.lang-sha-icon,
.lang-arm-icon{
  position: absolute;
  width: 20px;
  height: 15px;
  left: 11px;
  top:6px;
}

const mainLang = document.querySelector(".header__languages-arm");
const activeLang = document.querySelector(".header__lang-block");
mainLang.addEventListener('click',function(){
  activeLang.classList.toggle("active");
})

Answer 1

[Noder SS]

Все на Ютубе) https://youtu.be/MKx31x5u_SQ