SOURCE

$(document).ready(function() {
    const pointerWidth = $(".tab-item").siblings().first().width();
    const pointerHeight = $(".tab-item").siblings().first().height();

    $(".pointer").width(pointerWidth);
    $(".pointer").height(pointerHeight);

    $(".tab-item").click(function(event, index) {
        $(".tab-item").removeClass("tab-item--active");
        $(this).addClass("tab-item--active");

        // 滑块位置
        $('.pointer').animate({ 
            left: $(this).position().left 
        }, {
            duration: 300,
            easing: "swing"
        });
    });
});

<div class="tabs-wrapper">
    <ul class="tabs">
        <li class="tab-item tab-item--active" data-index="1">Yankos</li>
        <li class="tab-item" data-index="2">Lanwen</li>
        <li class="tab-item" data-index="3">Xiaomi</li>
    </ul>
    <div class="pointer"></div>
</div>

* {
    padding: 0;
    margin: 0;
}

body {
    padding: 32px;
}

.tabs-wrapper {
    position: relative;
    width: 100%;
    height: 48px;
    background-color: #FFFFFF;
    border-radius: 6px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1);
}

.tabs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 2;
    list-style: none;
}

.tab-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    cursor: pointer;
    transition: color 200ms;
}

.tab-item--active {
    color: #FFFFFF;
}

.pointer {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    border-radius: 6px;
    background-color: yellowgreen;
    z-index: 1;
}