直接看效果图
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#nav{list-style-type: none;margin: 50px auto 0;width: 950px;height: 38px;color: #333;
font-size: 14px;padding: 0;overflow: hidden;}
#nav li{width: 104px;height: 36px;float: left;text-align: center;line-height: 38px;border-top: 1px solid #ccc;
border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;cursor: pointer;}
#nav li:last-child{border-right: 1px solid #ccc;}
#nav span{width: 100%;height: 38px;display: block;position: relative;z-index: -1;}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<script type="application/javascript">
$(document).ready(function(e){
//点击li事件
$('#nav li').click(function(e){
$('.liclick').removeClass('liclick');
$(this).addClass('liclick');
});
//设置一个颜色数组
var color=['#FFDAB9','#7CFC00','#7FFFD4','#40E0D0','#C0C0C0','#FA8072','#FF69B4','#FFC0CB','#BA55D3'];
$('#nav li').append('<span>');
//给每个span添加颜色
$('#nav span').each(function(index,element){
$(this).css('background-color',color[index]);
});
//切换颜色*****注意：这里的38默认带了px，不需要自己写成38px
$('#nav li').hover(function(){
$(this).children('span').animate({'top':-38},200);
},function(){
$(this).children('span').animate({'top':0},200);
});
});
</script>
</head>
<body>
<ul id="nav">
<li class="liclick">导航一</li>
<li>导航二</li>
<li>导航三</li>
<li>导航四</li>
<li>导航五</li>
<li>导航六</li>
<li>导航七</li>
<li>导航八</li>
<li>导航九</li>
</ul>
</nav>
</body>
</html>
转载请注明原文地址: https://ju.6miu.com/read-1298286.html
