界面跳转样式设计代码

通过JS代码实现如下形式的界面跳转：

 JS部分代码：

$(function() {
    //              i只是一个索引
    oldthis = -1;
    $(".center-grandson-head>div").each(function(i) {
        $(this).click(function() {
            $(this).css("color", "rgb(178,98,36,1)");
            if(oldthis != -1) {
                $(".center-grandson-head>div:nth-child(" + oldthis + ")").css("color", "black");
                $("#center-grandson-centerlist" + oldthis + "").css("display", "none");
            } else {
                $("#center-grandson-centerlist1").css("display", "none");
            }
            sum = 8 * i;
            j = i + 1;
            $(".center-grandson-cart").css("margin-left", "" + sum + "%");
            $("#center-grandson-centerlist" + j + "").css("display", "block");
            oldthis = i + 1;
        });
    });
});

HTML部分代码：

<div class="incomeway_map">
                        <!--选择项字体-->
                        <div class="center-grandson-head">
                            <div>机构收银</div>
                            <div>支付宝</div>
                            <div>微信</div>
                            <div>现金</div>
                            <div>网行转账</div>
                            <div>POS机刷卡</div>
                        </div>
                        <!--选择项下的灰色边线-->
                        <div class="center-grandson-cart">

                        </div>
                        <!--选择框所控制的跳转界面-->
                        <div id="center-grandson-centerlist1">
                            机构收银
                        </div>
                        <div id="center-grandson-centerlist2">
                            支付宝
                        </div>
                        <div id="center-grandson-centerlist3">
                            微信
                        </div>
                        <div id="center-grandson-centerlist4">
                            现金
                        </div>
                        <div id="center-grandson-centerlist5">
                            银行转账
                        </div>
                        <div id="center-grandson-centerlist6">
                            POS机刷卡
                        </div>
                    </div>

CSS部分代码：

.incomeway_map {
    width: 100%;
    height: 530px;
}

.center-grandson-cart {
    height: 2px;
    background-color: rgb(178, 98, 36, 1);
    width: 8%;
    transition: margin-left 0.4s;
}

.center-grandson2-head {
    height: 50px;
    width: 100%;
    border-bottom: 1px solid gainsboro;
}

#center-grandson-centerlist2 {
    display: none;
}

#center-grandson-centerlist3 {
    display: none;
}

#center-grandson-centerlist4 {
    display: none;
}

#center-grandson-centerlist5 {
    display: none;
}

#center-grandson-centerlist6 {
    display: none;
}