1、html

<div class="navBar-box">
    <div class="navBar">
        <ul>
            <li>进行中</li>
            <li>成功</li>
            <li>失败</li>
        </ul>
        <div class="line"></div>
    </div>
    <div class="navBar-content">
        <div class="navBar-c-l">
            1
        </div>
        <div class="navBar-c-l">
            2
        </div>
        <div class="navBar-c-l">
            3
        </div>
    </div>
</div>

2、css

.navBar {
    position:relative;
    border-bottom:1px solid #f2f2f2;
    background:#fff;
    font-size:14px;
}
.navBar ul {
    display:flex;
    justify-content:space-around
}
.navBar ul li {
    display:inline-block;
    text-align:center;
    padding:10px;
    width:50px;
    color:#888;
}
.navBar ul .action {
    color:#FF612C;
}
.line {
    width:100px;
    height:2px;
    background:#FF612C;
    position:absolute;
    bottom:0;
}
.navBar-c-l:not(:first-of-type) {
    display:none;
}

3、js

var _w = $('.navBar ul li').width()
var _l = $('.navBar ul li')[0].offsetLeft
$('.line').css({
    width: _w,
    left: _l + 10//padding=10px
})
$('.navBar ul li').click(function(e) {
    console.log(_w)
    var id = $(this).index()
    $('.navBar-content .navBar-c-l').css({
        display: 'none'
    })
    $($('.navBar-content .navBar-c-l')[id]).css({
        display: 'block'
    })
    $('.line').stop(true, true)
    _l = $(this)[0].offsetLeft
    $('.line').animate({
        left: _l + 10
    })
})

运行效果：