改变class属性修改背景

来源:互联网 发布:算法谜题 pdf 百度云 编辑:程序博客网 时间:2024/05/29 09:12
<!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><script type="text/javascript">function change_bg(obj){   alert(obj.className);    var a=document.getElementById("Menu").getElementsByTagName("a");     //获取里边所有的a标签     for(var i=0;i<a.length;i++)    {           a[i].className="";         //给所有的a标签改变class属性都为空 }    obj.className="current";   //被点击的增加class属性为current }</script><style type="text/css">body{    font-size:17px;    }.current{    background:red;    }#container ul{    list-style-type:none;}#container ul li{    float:left;    margin-right:3px;}#container ul li a{text-decoration:none;color:#000;}</style></head><body><div id="container"><ul id="Menu"><li><a href="javascript:" onclick="change_bg(this)" class="current">Menu1</a></li><li><a href="javascript:" onclick="change_bg(this)">Menu2</a></li><li><a href="javascript:" onclick="change_bg(this)">Menu3</a></li><li><a href="javascript:" onclick="change_bg(this)">Menu4</a></li><li><a href="javascript:" onclick="change_bg(this)">Menu5</a></li></ul></div></body></html>