iPad Safari按钮突出显示问题

Question

I have a Div that when clicked I would like it to change colour and then link change page. I have managed to get the page change to work automatically with setTimeout(). I am currently using css to highlight the button with the :active state.

When using this though the highlight is temperamental and doesn't give the desired result. I have also had to use ontouchstart="" to get this to work currently.

Can anyone suggest a better way to make the div change colour on tap for a certain amount of time and then change page?

Thanks in advance!

Update:

The code I am using is along the lines of:

<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>