现在越来越时尚化，tab标签页已经不像原来的那么传统格式化了，现在给大家实现一个简约美观的tab标签页
比较简约的梯形tab
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.nav{
display: flex;
width: 300px;
align-items: flex-end;
}
.nav .item{
flex: 1;
height: 40px;
background: #eee;
border-radius: 5px 5px 0 0;
position: relative;
list-style: none;
}
.nav .item.active{
height: 45px;
background: orange;
}
.nav .item:first-child:before{
content: '';
display: none;
width: 10px;
height: 100%;
background: orange;
position: absolute;
right: -5px;
top: 0;
z-index: 10;
border-radius: 0 5px 0 0;
transform: skew(10deg);
}
.nav .item:first-child.active:before{
display: block;
}
.nav .item:last-child:before{
content: '';
display: none;
width: 10px;
height: 100%;
background: orange;
position: absolute;
left: -5px;
top: 0;
z-index: 10;
border-radius: 5px 0 0 0;
transform: skew(-10deg);
}
.nav .item:last-child.active:before{
display: block;
}
</style>
</head>
<body>
<ul class="nav">
<li class="item active"></li>
<li class="item"></li>
</ul>
</body>
<script>
document.querySelector('.nav').addEventListener('click',function(e){
if(e.target.nodeName=='LI'){
var item = document.querySelectorAll('.item');
for(var i = 0; i < item.length; i++){
item[i].className = 'item';
}
e.target.className = 'item active';
}
})
</script>
</html>
以上就可以实现漂亮tab标签页，不像传统的梯形tab那样，有更好的意见或者建议欢迎留言~
本文章为原创文章，转发请注明出处，谢谢!
转载：https://blog.csdn.net/p_pppxxxxmmm/article/details/106764545
查看评论