javascript

JavaScript realizes the color change effect of mouse click navigation bar

Needless to say nonsense, directly post js to achieve mouse click navigation bar color change code, the specific code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JAVASCRIPT The navigation bar mouse click color change effect </title>
<style type="text/css">
body {
  font-size:12px;
  font-family: Arial, Helvetica, sans-serif;
}
.ts_seled {
  color: #F00;
}
.ts_sel {
  color:#666;
}
</style>
<script language="javascript">
window.onload = initLinkStyle;
function initLinkStyle() {
  if(document.getElementsByName('myset')){
    var arrLink = document.getElementsByName('myset');
    for(i = 0; i < arrLink.length; i++) {
      var link = arrLink[i];
      link.className='ts_sel';
      link.onclick = clickNav;
    }
  }
}
/**
 *  Execute click events
 * @param {Object} event  Mouse event
 */
function clickNav(event) {
  var target = event.currentTarget;
  // Last selected a Style of
  if(document.getElementsByName('myset')){
    var arrLink = document.getElementsByName('myset');
    for(i = 0; i < arrLink.length; i++) {
      var link = arrLink[i];
      if(link.className == 'ts_seled') {
        link.className = 'ts_sel';
      }
    }
  }
  target.className = 'ts_seled';
  return false;// Block browser default events
}
</script>
</head>
<body>
  <ul>
    <li>
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" name="myset"> Home page </a>
    </li>
    <li>
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" name="myset"> Contact us </a>
    </li>
    <li>
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" name="myset"> Help </a>
    </li>
  </ul>
</body>
</html>