正在重置位置使用CSS

Question

我有这样的代码中CSS：

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

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

完成一场比赛后，一个令牌是在“终点线”，另一种可能是在屏幕上的任何位置。 我想单击一个按钮后重置两个位置。 （我使用JS与jQuery）。 谢谢！

Answer 1

假设起始位置是相同的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 
    }); 
}); 

Answer 2

你应该使用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'); 
});