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>

image given is a image sprite

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>

如何使用图像精灵切换图标

1 个答案: