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\"  =\"tabone()\" id=\"aa\">基本信息</li>
    <li  =\"tabtwo()\" id=\"bb\">损益情况</li>
    <li  =\"tabthree()\" id=\"cc\">分红情况</li>
    <li  =\"tabfour()\" id=\"dd\">流程历史</li>
    <li  =\"tabfive()\" id=\"ee\">流程图</li>
    <!--<li  =\"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\');
};