利用JavaScript当鼠标点击导航时改变背景 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;
        padding: 0;
        list-style: none;
        border: 0;
        }

    body{background: rgb(168, 166, 166);}
#box{width: 100%;
    height: 180px;
    background: rgba(0, 0, 0,0.5);
    opacity: 0.5;   overflow: hidden;}
#box li{width: 200px;   height: 130px;  float: left;    margin-left:10px ;  overflow: hidden;}
#box ul{margin:20px auto;   width: 1060px;}
#box  #a1{background: #ad5b5b;}
#box  #a2{background:#45a9bb;}
#box  #a3{background:#45af3b;}
#box  #a4{background:#ad9f1b;}
#box  #a5{background:#b514ca;}

    </style>
</head>
<body id="body">
<div id="box">
    <ul>
        <li id="a1" onclick="a()"></li>
        <li id="a2"  onclick="b()"></li>
        <li id="a3"  onclick="c()"></li>
        <li id="a4"  onclick="d()"></li>
        <li id="a5"  onclick="e()"></li>
    </ul>
</div>
    <Script>
  //点击里标签改变大div背景
function a(){ 
    document.getElementById("body").style.background="#b514ca"
}
function b(){ 
    document.getElementById("body").style.background="#ad9f1b"

}
function c(){ 
    document.getElementById("body").style.background="#45af3b"

}
function d(){ 
    document.getElementById("body").style.background="#ad5b5b)"

}
function e(){ 
    document.getElementById("body").style.background="#45a9bb"

}

    </Script>
</body>
</html>
posted @ 2020-07-15 20:28  zayyo  阅读(96)  评论(0)    收藏  举报