abstract：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下劃線</title>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下劃線</title>
<style>
*{
margin: 0;
padding: 0;
}
.cd{
width:800px;
margin: 0 auto;
position:relative;
}
ul{
list-style: none;
z-index:20;
}
li{
float: left;
width: 100px;
height: 30px;
background-color: #00a0e9;
text-align: center;
line-height: 30px;
cursor:pointer;
position:relative;
}
.hx{
width: 100px;
height: 5px;
background-color: #000000;
position: absolute;
z-index:10;
top:30px
}
</style>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="cd">
<ul>
<li class="0">111111</li>
<li class="1">222222</li>
<li class="2">333333</li>
<li class="3">444444</li>
<li class="4">555555</li>
<li class="5">555555</li>
</ul>
<div class="hx"></div>
</div>
<script>
$(function () {
$('li').hover(function () {
$cccc = parseInt($(this).attr('class'))*100;
$('.hx').stop().animate({left:$cccc+'px'},300)
},
function(){
$('.hx').stop().animate({left:'0px'},300)
})
})
</script>
</body>
</html>
Correcting teacher：滅絕師太Correction time：2018-11-22 09:12:19
Teacher's summary：變量取名的時(shí)候要注意一點(diǎn)，不熟悉的地方需要備注哦，其他沒問題！