哪位大神可以帮忙看下
<p class="header">
<ul class="header-nav">
<li id="list_1">全部</li>
<li id="list_2">待付款</li>
<li id="list_3">待发货</li>
<li id="list_4">待确认</li>
<li id="list_5">已完成</li>
</ul>
</p>
头部导航怎样做出这样的效果?图片描述
点击哪个li标签哪个黑色线条出现在哪个li标签的底部,用循环的方式
天蓬老师2017-04-11 11:23:39
用jquery实现如下,操作简单一些,原生dom要看晕了
<style>
ul li{
text-align:center;
float:left;
list-style:none;
width:100px;
border:3px solid transparent;
cursor:pointer;
}
.active{
border-bottom:3px solid #333;
}
.hide{
border-bottom:3px solid transparent;
}
</style>
<ul class="header-nav">
<li id="list_1">全部</li>
<li id="list_2">待付款</li>
<li id="list_3">待发货</li>
<li id="list_4">待确认</li>
<li id="list_5">已完成</li>
</ul>
<script src="js/jquery-1.12.4.js"></script>
<script>
$("ul>li").each(function(i,element){
element.onclick=function(){
$(this).addClass("active").siblings().removeClass('active');
}
});
</script>
伊谢尔伦2017-04-11 11:23:39
获取导航条
var oNav = document.getElementsByClassName('header-nav')[0];
oNav.onclick = function(e){
var target = e.target || e.srcElement;
if(target.nodeName =='Li'){
//这里就是所点中li的操作
}
}
高洛峰2017-04-11 11:23:39
可以试试这个,原生写法:
<p class="header">
<ul class="header-nav">
<li id="list_1">全部</li>
<li id="list_2">待付款</li>
<li id="list_3">待发货</li>
<li id="list_4">待确认</li>
<li id="list_5">已完成</li>
</ul>
</p>
.header-nav{
list-style-type: none;
background-color: #fff;
display: inline-block;
padding-left: 0;
border-bottom: 8px solid #e2e2e2;
}
.header-nav li{
display: inline;
padding: 10px;
line-height: 32px;
cursor: pointer;
}
.header-nav li.active{
border-bottom: 5px solid #000;
}
var lis = [].slice.apply(document.querySelectorAll('.header-nav li'));
document
.querySelector('.header-nav')
.addEventListener('click', function(e){
lis.forEach(function(li){
li.classList.remove('active');
});
e.target.classList.add('active');
}, false);
线上示例可以看:jsFiddle