改变class属性修改背景

最新推荐文章于 2022-07-11 21:38:18 发布

HUMHSX

最新推荐文章于 2022-07-11 21:38:18 发布

阅读量1.5k

点赞数 2

本文链接：https://blog.csdn.net/HUMHSX/article/details/8505036

版权

<!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:" οnclick="change_bg(this)" class="current">Menu1</a></li>
<li><a href="javascript:" οnclick="change_bg(this)">Menu2</a></li>
<li><a href="javascript:" οnclick="change_bg(this)">Menu3</a></li>
<li><a href="javascript:" οnclick="change_bg(this)">Menu4</a></li>
<li><a href="javascript:" οnclick="change_bg(this)">Menu5</a></li>
</ul>
</div>
</body>
</html>

HUMHSX

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
改变class属性修改背景

无标题文档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]
复制链接

扫一扫