как переключать иконки с помощью спрайтов изображений

Question

В моей боковой навигационной панели есть список значков.Значок, который активен, должен быть заменен другим значком.В тот момент, когда мы нажимаем другой значок в списке, предыдущий значок должен быть заменен на оригинальный первый значок.

jQuery(".login-normal").click(function() {
  jQuery(".login-normal").toggleClass("login-sel");

});
jQuery(".images-nor").click(function() {
  jQuery(".images-nor").toggleClass("images-sel");
});

.images-nor,
.images-sel,
.login-normal,
.login-sel {
  display: inline-block;
  background: url("spr.png") no-repeat;
  overflow: hidden;
  text-indent: -9999px;
  text-align: left;
}

.images-nor {
  background-position: -0px -0px;
  width: 66px;
  height: 63px;
}

.images-sel {
  background-position: -0px -63px;
  width: 66px;
  height: 63px;
}

.login-normal {
  background-position: -0px -952px;
  width: 47px;
  height: 60px;
}

.login-sel {
  background-position: -0px -1012px;
  width: 47px;
  height: 60px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="vertical-menu">
  <ul>
    <li>
      <a href="#" class="login-normal"></a>
    </li>
    <li>
      <a href="#" class="images-nor"></a>
    </li>
  </ul>
</div>

данное изображение является спрайтом изображения

Answer 1

Я просмотрел ваш код и не вижу проблем.Внесены некоторые незначительные изменения, чтобы пример работал правильно, но, как вы можете видеть ниже, когда вы запускаете фрагмент, он работает.

$(function() {
  $(".login-normal").click(function(e) {
    e.preventDefault();
    $(".login-normal").toggleClass("login-sel");
    $(".images-nor").removeClass("images-sel");
  });
  $(".images-nor").click(function(e) {
    e.preventDefault();
    $(".images-nor").toggleClass("images-sel");
    $(".login-normal").removeClass("login-sel");
  });
});

.vertical-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.images-nor,
.images-sel,
.login-normal,
.login-sel {
  display: inline-block;
  background: url("https://i.stack.imgur.com/BAKtU.png") no-repeat;
  overflow: hidden;
  text-indent: -9999px;
  text-align: left;
}

.images-nor {
  background-position: -0px -0px;
  width: 66px;
  height: 63px;
}

.images-sel {
  background-position: -0px -63px;
  width: 66px;
  height: 63px;
}

.login-normal {
  background-position: -0px -952px;
  width: 47px;
  height: 60px;
}

.login-sel {
  background-position: -0px -1012px;
  width: 47px;
  height: 60px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="vertical-menu">
  <ul>
    <li>
      <a href="#" class="login-normal"></a>
    </li>
    <li>
      <a href="#" class="images-nor"></a>
    </li>
  </ul>
</div>