<!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>导航点击后变色</title> <style type="text/css"> #nav{width:500px;height:30px;margin:0px auto;background:#ddd;} #nav a{display:block;width:80px;height:30px;line-height:30px;text-align:center;font-size:14px;float:left;color:#000;text-decoration:none;} #nav a:hover{background:#fff;text-decoration:none;} #nav a.cc{color:red;background:#fff;} </style> <script type="text/javascript"> function dangqian(id) { for(i=1;i<6;i++) { if(i==id) { document.getElementById(i).className='cc'; } else { document.getElementById(i).className=''; } } } </script> </head> <body> <div id="nav"> <a href="#" onclick="dangqian(this.id)" id="1">首页</a> <a href="#" onclick="dangqian(this.id)" id="2">产品介绍</a> <a href="#" onclick="dangqian(this.id)" id="3">企业文化</a> <a href="#" onclick="dangqian(this.id)" id="4">联系我们</a> <a href="#" onclick="dangqian(this.id)" id="5">人才招聘</a> <div class="cl"></div> </div> </body> </html>