Question

我使用图标作为导航链接。必须在图标处于活动状态时将其更改为另一个图标，然后再次将其转换为第一个图标，同时借助jQuery和CSS图像精灵将其移动到另一个链接中。

$("div").click(function() {
  $(".login-normal").toggleClass("login-sel");
});

.login-normal,
.login-sel {
  display: inline-block;
  background: url('log12.png') no-repeat;
  overflow: hidden;
  text-indent: -9999px;
  text-align: left;
}

.login-normal {
  background-position: -0px -0px;
  width: 47px;
  height: 60px;
}

.login-sel {
  background-position: -0px -60px;
  width: 47px;
  height: 60px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="login-normal"></div>

Answer 1

我用随机精灵作了一个例子，因为这里没有您的精灵。更改记录在CSS代码中。

您需要根据自己的精灵尺寸更改宽度，高度和精灵坐标。

$("div").click(function() {
  $(".login-normal").toggleClass("login-sel");
});

.login-normal,
.login-sel {
  display: inline-block;
  background: url('https://coderwall-assets-0.s3.amazonaws.com/uploads/picture/file/642/humans.jpeg') no-repeat;
  /* overflow: hidden; Not necessary */
  /* text-indent: -9999px; Not necessary */
  /* text-align: left; Not necessary */
}

.login-normal {
  background-position: -0px -0px;
  /* width: 47px;
  height: 60px; */
  width: 180px; /* Added for these sprite dimensions */
  height: 150px; /* Added for these sprite dimensions */
}

.login-sel {
  /* The other image is located 150 pixels lower. X-axis does not change */
  background-position: -0px -150px;
  /* width: 47px; Not necessary */
  /* height: 60px; Not necessary */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="login-normal"></div>

Answer 2

使用jQuery，您可以尝试类似的方法。

.active{background: url('images/active.png');}

$('#nav').live('click',function () {
   $('.active').removeClass('active');
   $(this).addClass('active');
});

还有一个CSS活动选择器

a:active { 
    // your style here
}

如何更改用作导航链接的图标？

2 个答案: