在日常的app应用经常会见到导航栏里面切换的样式，平时在开发小电商里面也当中也有大量的使用。
下面一起看看这种样式使用。这种样式用到after 的特性 让其在文字的底部产生色块。
这个after的使用，其中需要在一个子节点里面结合position 的相对和绝对定位做处理。
1 开始的结构
做这种的时候，有一种日常结构的使用，例如在一个div里面包着三个子节点。这样看起来更像一个容器，子节点被装载在里面。通常会习惯地把它命名为*-item 的项。
<div class="ui-navs">
<div class="ui-nav-item active">全部</div>
<div class="ui-nav-item">待支付</div>
<div class="ui-nav-item">已支付</div>
</div>
有了这个基础，接下来可能会有flex 出场的机会，在大部分布局里面。flex 能够胜任很多业务场景，而且使用起来非常简单。十分好用。为了让下面的子节点平均分配，采用flex：1 的做法 ，让其平均一下。这里仅仅有三个节点，宽度大概为33.3333 的宽度。布局写完了。剩下就是利用绝对定位的做法。结合after 让其底部出现一个1px的色块。有了这个基础，剩下的样式就好写很多。
下面为一些简单的代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 测试</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
</head>
<style>
html,body{
margin: 0;
padding: 0;
}
.ui-navs{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.ui-nav-item {
text-align: center;
flex: 1;
position: relative;
padding:10px 0;
}
.active{
color: yellowgreen;
}
/*带上after去*/
.ui-nav-item.active:after{
content:'' ;
height: 1px ;
width: 100%;
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: yellowgreen;
}
</style>
<body>
<div class="ui-navs">
<div class="ui-nav-item active">全部</div>
<div class="ui-nav-item">待支付</div>
<div class="ui-nav-item">已支付</div>
</div>
<script type="text/javascript">
$('.ui-nav-item').click(function(){
$(this).addClass('active');
$(this).siblings().removeClass('active')
})
</script>
</body>
</html>
整体来讲，这里也出现一些交互上的不足，还没实现借助 transition 改变移动的做法，让每个点击单独出现好一点交互效果。有待对css 的研究看能否突破一下。
