登录后即可发布作业，立即登录
我的作业
全部作业 130
<link rel="stylesheet" href="css/reset.css">
<style>
*{
margin: 0;
padding: 0;
}
.box{
height: 100px;
}
h2{
float: left;
font-size: 20px;
line-height: 100px;
padding-left: 80px;
}
.box .nav-a{
float: right;
position: relative;
width: 520px;
height: 80px;
}
.box .nav-a .ul-b{
line-height: 100px;
padding-right: 200px;
}
.box .nav-a .ul-b li{
float: left;
margin-right: 32px;
}
.box .nav-a .ul-b li a{
color: #000;
}
.xiabiankuang{
position: absolute;
width: 32px;
height: 3px;
background-color: red;
left: 0;
bottom: 0;
transition: left .4s ease 0s;
}
.box .nav-a .ul-b .current a{
color: red;
}
</style>
</head>
<body>
<div class="box">
<h2>慕课手机</h2>
<nav class="nav-a">
<ul class="ul-b" id="ul-b">
<li class="current"><a href="javascript:;" data-n="0">首页</a></li>
<li><a href="javascript:;" data-n="1">外观</a></li>
<li><a href="javascript:;" data-n="2">配置</a></li>
<li><a href="javascript:;" data-n="3">型号</a></li>
<li><a href="javascript:;" data-n="4">说明</a></li>
</ul>
<div class="xiabiankuang" id="xiabiankuang"></div>
</nav>
</div>
<script>
var n=0;
var ulb=document.getElementById('ul-b');
var lis=document.getElementsByTagName('li');
var xia=document.getElementById('xiabiankuang');
ulb.onclick=function(e){
if(e.target.tagName.toLowerCase()=='a'){
//排他操作
for(var i=0;i<lis.length;i++){
lis[i].className='';
}
n=e.target.getAttribute('data-n');
lis[n].className=' current';
xia.style.left=64*n+'px';
}
}
</script>
</body>
</html>