支付宝属性导航条，进度条

先看效果：

实现原理：
1、左边的圆圈（点）和右边的文字看成一个整体，由li实现 ；
2、关键是左边的‘线’，它在结构上是独立的元素。

HTML：

<div class="process-bar">    <div class="bg-line"></div>    <div class="process-content">        <ul>            <li class="active">                <span class="dot"><span class="inner"></span></span>                <a class="link" href="#itme-1">转账收款</a>            </li>            <li>                <span class="dot"><span class="inner"></span></span>                <a class="link" href="#itme-2">生活便民</a>            </li>            <li>                <span class="dot"><span class="inner"></span></span>                <a class="link" href="#itme-1">公益教育</a>            </li>            <li>                <span class="dot"><span class="inner"></span></span>                <a class="link" href="#itme-3">旅行票务</a>            </li>            <li>                <span class="dot"><span class="inner"></span></span>                <a class="link" href="#itme-4">娱乐网购</a>            </li>            <li>                <span class="dot"><span class="inner"></span></span>                <a class="link" href="#itme-5">其它</a>            </li>        </ul>    </div>   </div>

CSS：

<style>    *{padding:0;margin:0;}    body{background:#f2f2f2;font-family:sans-serif;}    li{list-style-type:none;}    a{text-decoration:none;color:#666;}    a:hover{color:#0be;}    .process-bar{font-size:14px;position:relative;height:300px;width:122px;opacity:0.5;margin:50px auto;background:#f2f2f2;}    .process-bar .bg-line{height:250px;width:0;border-left:1px solid #0be;position:absolute;top:25px;left:9px;z-index:1;}    .process-bar li{height:50px;line-height:50px;}    .process-bar .dot{display:inline-block;width:11px;height:11px;padding:4px;border-radius:50%;margin-right:10px;vertical-align:middle;position:relative;z-index:2;background:#f2f2f2;}    .process-bar .dot .inner{display:block;width:9px;height:9px;border:1px solid #0be;border-radius:50%;}    .process-bar li.active .link{color:#0be;}    .process-bar li.active .dot .inner{background:#0be;}</style>

Javascript：

<script>    $('.process-bar').on('click','li',function(){        $(this).addClass('active').siblings().removeClass('active');    })</script>

再看我的效果：

理解原理最重要，可以举一反三，相信横状的进度条也是小case了。