html页面生成Tab卡

资金管理系统全景图页面

 ================================================================================================

<!-- 页面tab 样式-->
<style type="text/css">
    .ullu{width: 100%;border-bottom: 2px solid #62a9eb;height: 37px;margin: 15px 0;}
    .ullu li{float: left;height: 35px;width: 95px;color: #62a9eb;border-radius:6px 6px 0 0;line-height: 35px;text-align: center;background: #fff;}
    .blueli{color: #fff !important;background: #62a9eb !important;}
    .ullu li:hover{color: #fff !important;background: #62a9eb !important;}
</style>

================================================================================================

<ul class="ullu" id="ullu">
    <li class="blueli" οnclick="tabone()" id="aa">基本信息</li>
    <li οnclick="tabtwo()" id="bb">损益情况</li>
    <li οnclick="tabthree()" id="cc">分红情况</li>
    <li οnclick="tabfour()" id="dd">流程历史</li>
    <li οnclick="tabfive()" id="ee">流程图</li>
    <!--<li οnclick="tabfour()" id="dd">附件列表</li>-->
</ul>

 ================================================================================================

<!-- tab页面控制显示隐藏-->
function tabone() {
    $("#tableone").show();
    $("#tabletwo").hide();
    $("#tablethree").hide();
    $("#tablefour").hide();
    $("#tablefive").hide();
    $("#aa").addClass('blueli').siblings().removeClass('blueli');
};
function tabtwo() {
    $("#tableone").hide();
    $("#tabletwo").show();
    $("#tablethree").hide();
    $("#tablefour").hide();
    $("#tablefive").hide();
    $("#bb").addClass('blueli').siblings().removeClass('blueli');
};
function tabthree() {
    $("#tableone").hide();
    $("#tabletwo").hide();
    $("#tablethree").show();
    $("#tablefour").hide();
    $("#tablefive").hide();
    $("#cc").addClass('blueli').siblings().removeClass('blueli');
};
function tabfour() {
    $("#tableone").hide();
    $("#tabletwo").hide();
    $("#tablethree").hide();
    $("#tablefour").show();
    $("#tablefive").hide();
    $("#dd").addClass('blueli').siblings().removeClass('blueli');
};
function tabfive() {
    $("#tableone").hide();
    $("#tabletwo").hide();
    $("#tablethree").hide();
    $("#tablefour").hide();
    $("#tablefive").show();
    $("#ee").addClass('blueli').siblings().removeClass('blueli');
};