使用CSS重置位置

Question

我在CSS中有这个代码：

#blueToken
{
    top:415px;
    left:35px;
    z-index: 80;
}

#redToken
{
    top:405px;
    left:25px; 
    z-index: 70;
}

完成一场比赛后，一个标记位于“终点线”，另一个标记位于屏幕上的任意位置。 单击按钮后，我想重置两个位置。 （我正在使用JS和jQuery）。

Answer 1

您应该将position property与top, left or z-index property

一起使用

也可以使用类，例如

.blueToken
{
    top:415px;
    left:35px;
    z-index: 80;
    position:relative;
}

.redToken
{
    top:405px;
    left:25px; 
    z-index: 70;
    position:relative;
}

并将jquery.toggleClass()用于add or remove class。

此code可能对您有帮助，

$('.btn-reset').click(function() {
    $(this).toggleClass('blueToken redToken');
});

Answer 2

假设起始位置与CSS代码相同，并且您有一个类名为btn-reset的按钮来重置位置。

$('.btn-reset').click(function() {
   $('#blueToken').css({
       top: 415,
       left: 35,
       'z-index': 80
   });
   $('#redToken').css({
       top: 415,
       left: 25,
       'z-index': 70
   });
});