abstrak：<!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&quo
<!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>下劃線跟隨導(dǎo)航</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style>
*{ margin:0px; padding:0px;}
.main{
height: 70px;
width: 900px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
background-color: #CCC;
}
ul li{
list-style-type: none;
float: left;
margin-left: 25px;
margin-top:20px;
}
.xhx{
width: 65px;
height: 6px;
z-index: 10;
position: relative;
background-color: #2087ed;
top: 60px;
margin-left:65px;
}
#indexxhx{
width: 45px;
height: 6px;
z-index: 10;
position: relative;
background-color: #2087ed;
top: 65px;
}
</style>
<script>
$(function(){
$('li').hover(function(){
var x=parseInt($(this).attr('name'))*85
$('.xhx').stop().animate({left:x+'px'},200)
$(this).css("color","#2087ed")
},
function(){
$('.xhx').stop().animate({left:'0px'},200)
$(this).css("color",'black')
}
)
})
</script>
</head>
<body>
<div class="header">
<div class="main">
<ul>
<li style="margin-left:10px;">首頁</li>
<li name='0'>域名注冊</li>
<li name='1'>域名交易</li>
<li name='2'>虛擬主機(jī)</li>
<li name='3'>云服務(wù)器</li>
<li name='4'>企業(yè)郵箱</li>
<li name='5'>PVS主機(jī)</li>
<li name='6'>安全</li>
<li name='7'>主機(jī)租用</li>
<li name='8'>云建站</li>
<li name='9'>渠道合作</li>
</ul>
<div id="indexxhx"></div>
<div class="xhx">
</div>
</div>
</div>
</body>
</html><!--總結(jié)
z-index：元素的定位與文檔流無關(guān)，所以它們可以覆蓋頁面上的其它元素
z-index屬性指定了一個元素的堆疊順序（哪個元素應(yīng)該放在前面，或后面）
一個元素可以有正數(shù)或負(fù)數(shù)的堆疊順序
parseInt()
hover()
animate()
stop()
-->
Guru membetulkan：查無此人Masa pembetulan：2019-01-14 09:44:43
Rumusan guru：寫的還可以。 parseInt() hover() animate() stop() 這些怎么沒說作用？代碼要縮進(jìn)。繼續(xù)加油