按钮设计

 实例图（一）：

 HTML代码：

<div class="income_box_top_doublebutton">
                        <div class="doublebutton_border doublebutton_left">
                            <button class="button_style doublebutton_1">
                                应收分析
                            </button>
                        </div>
                        <div class="doublebutton_border doublebutton_right">
                            <button class="button_style  doublebutton_2">
                                实收分析
                            </button>
                        </div>
</div>

CSS代码：

.income_box_top_doublebutton {
    float: left;
    width: 164px;
    height: 50px;
    padding-top: 12px;
}

.button_style {
    background-color: white;
    outline: none;
    border: 0;
    font-size: 16px;
    color: gray;
}

 

JS代码：

$(function() {
    $(".doublebutton_1").click(function() {
        $(".doublebutton_1").css("color", "#F58E2C");
        $(".doublebutton_2").css("color", "gray");
        $(".doublebutton_left").css("border-top-color", "#F58E2C");
        $(".doublebutton_left").css("border-left-color", "#F58E2C");
        $(".doublebutton_left").css("border-bottom-color", "#F58E2C");
        $(".doublebutton_right").css("border-left-color", "#F58E2C");
        $(".doublebutton_right").css("border-top-color", "gray");
        $(".doublebutton_right").css("border-right-color", "gray");
        $(".doublebutton_right").css("border-bottom-color", "gray");
    });
    $(".doublebutton_2").click(function() {
        $(".doublebutton_2").css("color", "#F58E2C");
        $(".doublebutton_1").css("color", "gray");
        $(".doublebutton_right").css("border-color", "#F58E2C");
        $(".doublebutton_left").css("border-top-color", "gray");
        $(".doublebutton_left").css("border-left-color", "gray");
        $(".doublebutton_left").css("border-bottom-color", "gray");
    });

});

最后可根据实际情况，在JS的代码找那个添加诸如： 

$(".income_box_receivable").css("display", "block");
        $(".income_box_officialreceipts").css("display", "none");

的代码实现界面的跳转

 

实例图（二）：

HTML代码：

<div class="income_check_div">
                        <button class="income_check_button">
                            <span>查&nbsp;看&nbsp;详&nbsp;情&nbsp;></span>
                        </button>

</div>

 CSS代码：

.income_check_div {
    float: right;
    width: 150px height:55px;
    padding-top: 15px;
}

.income_check_button {
    background-color: white;
    outline: none;
    border: 0;
    font-size: 16px;
    color: #F58E2C;
}

JS部分代码：

$(function() {
//    项目中的跳转代码,引用的时候根据实际情况进行替换
    $(".income_check_button").click(function() {
        $(".income_homepage_backgroundcolor").css("display", "block");
        $(".homepag_backgroundcolor").css("display", "none");
    });

}）；