tab栏鼠标移入移出或点击选中，下边线缓慢显示或隐藏

1. css 

<style>
ul{
	margin: 0;
	padding: 0;
	font-size: 0;
}
li{
	margin: 10px;
	padding: 10px;
    font-size: 18px;
    color: #000;
	line-height: 30px;
	display: inline-block;
	vertical-align: top;
	position: relative;
	
}
li:after{
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0px;
    height: 2px;
    background: #337ab7;
    transition: all 500ms;
}
li:hover:after{
	width: 100%;
}
.active:after{
	width: 100%;
}
</style>

2. dom

<ul>
	<li class="active">啦啦啦啦</li>
	<li>啦啦啦啦</li>
	<li>啦啦啦啦</li>
	<li>啦啦啦啦</li>
</ul>

3. js

<script src="../jquery.js"></script>
<script>
	$(function(){
	   $("li").click(function(){
		  $(this).addClass("active").siblings("li").removeClass("active")
	   })
	})
</script>