javascript - iPad Safari 按钮高亮问题

Question

我有一个 Div，当我点击它时我希望它改变颜色然后链接更改页面。我已经设法让页面更改自动与 setTimeout() 一起工作。我目前正在使用 css 突出显示具有 :active 状态的按钮。

使用此功能时，虽然高光是有气质的，但没有达到预期的效果。我还不得不使用 ontouchstart=""来让它在当前工作。

谁能提出一个更好的方法来让 div 在点击一段时间后改变颜色然后改变页面？

提前致谢!

更新:

我使用的代码是这样的:

<style type="text/css">
#button_RH_Pg1{
background-color:#FF0000;
padding:10px;
text-align:center;
font-weight:bold;
color:#FFFFFF;
font-family:arial;
cursor:hand;
}   
#button_RH_Pg1:active{
background-color:#000000;
}   
 </style>
 <script>
 function page2load(){
document.getElementById('page1dis').style.display="none";
document.getElementById('page2dis').style.display="block";
}
</script>
<div id="page1dis">
<div id="button_RH_Pg1" onclick="page2load()">This is a button</div>
</div>

Answer 1

<style type="text/css">
div.button_RH {
  background-color: #FF0000;
  padding: 10px;
  text-align: center;
  font-weight: bold;
  color: #FFFFFF;
  font-family: arial;
  cursor: hand;
}
</style>
<script>
var delay = 500;
function pageload(button, targetpage) {
  button.style.backgroundColor = "#000000";
  setTimeout(function() {
    button.parentNode.style.display = "none";
    document.getElementById(targetpage).style.display = "block";
    button.style.backgroundColor = "#FF0000";
  }, delay);
}
</script>
<div id="page1dis">
  <div class="button_RH" onclick="pageload(this, 'page2dis')">
    This is a button
  </div>
</div>