这两天在项目中用到了面包屑导航栏；所以我自己又重新写了一个纯CSS实现的，当然绑定事件还是要靠js嘛。
上图是未点击状态下的导航栏
上面这些图是点击后的导航栏。
代码实例如下：
有一个问题暂时没有想到什么好的方法解决，就是在未点击状态下的三角框不明显，基本看不到。不知道该怎么解决这个，让它看起来明显一些。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>面包屑导航</title>
<style type="text/css">
.navList{
display:flex;
list-style: none;
}
.navList li{
border: 1px solid #DDDDDD;
padding: 10px 20px;
position: relative;
}
.navList li:before,.navList li:after{
content: '';
position: absolute;
top: 0;
left: 100%;
z-index: 1;
display: block;
border-top: 18px solid transparent;
border-bottom: 18px solid transparent;
border-left: 18px solid #aaa;
}
.icon{
display: inline-block;
position: absolute;
top: 0;
left: 100%;
z-index: 1;
display: block;
border-top: 18px solid transparent;
border-bottom: 18px solid transparent;
border-left: 18px solid #FFFFFF !important;
}
.iconActive{
display: inline-block;
position: absolute;
top: 0;
left: 100%;
z-index: 1000;
display: block;
border-top: 18px solid transparent;
border-bottom: 18px solid transparent;
border-left: 18px solid #00BFFF !important;
}
.navList li:after{
border-left: 18px solid #fff;
}
.navList li:first-child:after{
z-index: 102;
}
.navList li:nth-child(2):after{
z-index:62;
}
.navList li:nth-child(3):after{
z-index:52;
}
.navList li:nth-child(4):after{
z-index:32;
}
.active{
background: #00BFFF;
}
.navList li a{
text-decoration: none;
color:#000;
position: relative;
}
</style>
</head>
<body >
<div class="nav">
<ul class="navList">
<li class="navList-item" style="z-index:100" >
<a href="javascript:;" class="breadcrumb">第一页</a>
<i class="icon"></i>
</li>
<li class="navList-item" style="z-index: 60;" >
<a href="javascript:;" class="breadcrumb">第二页</a>
<i class="icon"></i>
</li>
<li class="navList-item" style="z-index:50" >
<a href="javascript:;" class="breadcrumb">第三页</a>
<i class="icon"></i>
</li>
<li class="navList-item" style="z-index: 30;" >
<a href="javascript:;" class="breadcrumb">第四页</a>
<i class="icon"></i>
</ul>
</div>
<script type="text/javascript" src="../js/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$('.navList').on('click','li',function () {
var index = $(this).index();
$(this).addClass('active').siblings().removeClass('active');
$(this).children('.icon').addClass('iconActive').parent().siblings().children('.icon').removeClass('iconActive')
})
</script>
</body>
</html>