导航点击后变色 

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

 

posted on 2012-12-20 11:11  风林幻海  阅读(656)  评论(0)    收藏  举报

导航