SOURCE

// 在文档加载后
$(document).ready(function(){

    // 事件_按钮被点击
    $(document).on('click', '.tabbar-head > li', function(){
        var target = $(this).data('target');
        console.log('data-target: ' + target)

        // 改变选中按钮
        $('.tabbar-head > li').removeClass('active');
        $(this).addClass('active'); // 当前 .tabbar-head > li 等于 this

        // 切换显示内容区域
        $('.tabbar-body > li').removeClass('active'); 
        $(target).addClass('active'); // 只激活我们所选的
    });

});

<div class="tabbar">
    <!-- 头部切换按钮 -->
    <ul class="tabbar-head">
        <li class="active" data-target="#mobilelogin">手机登录</li>
        <li data-target="#login">密码登录</li>
    </ul>
    <!-- 内容区域 -->
    <ul class="tabbar-body">
        
        <li class="active" id="mobilelogin">
            <form action="">
                <label for="">手机号</label>
                <input type="text">

                <button type="submit">手机登录</button>
            </form>
        </li>

        <li id="login">
            <form action="">
               <label for="">帐号</label>
                <input type="text">

                <button type="submit">登录</button>
            </form>
        </li>

    </ul>
</div>

* {
    list-style: none;
    padding: 0;
    margin: 0;
}

html {
    background: #f3f3f3;
}

.tabbar {
    width: 300px;
    background: #fff;
    padding: 15px;
}

/* 头部 */
.tabbar-head {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.tabbar-head > li {
    padding: 7px 12px;
    box-sizing: border-box;
}
.tabbar-head > li.active {
    border-bottom: 2px solid red;
}

/* 内容区域 */
.tabbar-body {
    padding: 15px 0 0 0;
}

.tabbar-body > li {
    display: none;
}

.tabbar-body > li.active {
    display: block;
}