<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隔行变色</title>
<!--引用bootstrap-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="bootstrap/js/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<style>
li{
padding:10px 0;
}
.hover{
background-color: #cccccc!important;
}
</style>
<script>
window.onload = function () {
//获取ul里的所有li赋给数组lis
var lis = document.getElementsByTagName("li");
for(var i = 0; i <= lis.length; i++ ){
//偶数被2整除
if(i%2 == 0)
{
// 将是偶数的li背景设魏#eeee
lis[i].style.backgroundColor = "#eee"
}
//鼠标经过li,当前底色变量
lis[i].onmouseover = function () {
//this指的是时间的调用者
this.className = "hover"
}
lis[i].onmouseout = function () {
//this指的是时间的调用者
this.className = ""
}
}
}
</script>
</head>
<body>
<div class="container-fluid text-center" style="margin-top: 50px">
<ul class="list-unstyled">
<li>书声雨声读书声,声声入耳</li>
<li>书声雨声读书声,声声入耳</li>
<li>书声雨声读书声,声声入耳</li>
<li>书声雨声读书声,声声入耳</li>
<li>书声雨声读书声,声声入耳</li>
</ul>
</div>
</body>
</html>