选项卡

选项卡

1.以下是css样式

<style type="text/css">
     ul{list-style-type: none;margin-bottom: -2px;padding-bottom: 30px}
    .tab{width:1000px;margin: 10px}
    a{text-decoration: none;color: black;}
    a:active {
        color:black;
    }
    a:visited{
        color: black;
    }
    .title li{display: inline-block;background: #fff;text-align: center;width: 200px;height: 30px;margin: 0 1px;line-height: 30px;
        border-top-left-radius:6px;
        border-top-right-radius:6px;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;}
    .title .active{background-color: #CBD0CC }
   </style>

2.以下是js代码

 $(function(){
            $(".title li").click(function(){
            $(this).addClass("active").siblings().removeClass("active");
            $("#content .mod").eq($(".title li").index(this)).show().siblings("#content .mod").hide();
        });
    });

3.HTML部分

<form id="editForm" action="${ctxPath}/customerperson/add" method="POST" role="form"
                          class="form-horizontal">
                        <div class="tab">
                            <ul class="title">
                                <li class="active"><a href="#">基本信息</a></li>
                                <li><a href="#">配偶信息</a></li>
                                <li><a href="#">经济信息</a></li>
                            </ul>
                            <div id="content">
                                <div class="mod">
                                    <% include("/system/customerperson/customerpersonForm.html"){} %>
                                </div>
                                <div class="mod" style="display: none">
                                    <% include("/system/customerperson/customerpersonSpouseForm.html"){} %>
                                </div>
                                <div class="mod" style="display: none">
                                    <% include("/system/customerperson/customerpersonEconomicsForm.html"){} %>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-5 col-sm-offset-5">
                                <button type="button" class="btn btn-default"
                                        onclick="common_ajax.ajaxMainPanel('/customerperson/manager');">
                                    <i class="fa fa-fw fa-history"></i> 返回
                                </button>

                                <% if(shiro.hasPermission("/customerperson/add")){ %>
                                <button type="button" class="btn btn-green"
                                        onclick="ifsave()">
                                    <i class="fa fa-fw fa-save"></i> 保存
                                </button>
                                <% } %>
                            </div>

                        </div>
                    </form>