<style>
    .hls-tab {
        height: 45px;
        margin:0 auto;
    }
    .hls-tab > ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 45px;
    }

    .hls-tab ul > li {
        float: left;
        cursor: pointer;
        height: 45px;
        background-color: #FFF;
        color: #999999;
        line-height: 45px;
        text-align: center;
    }

    .hls-tab li:first-child {
        border-bottom-left-radius: 5px;
    }

    .hls-tab li:last-child {
        border-bottom-right-radius: 5px;
    }

    .hls-tab li:hover {
        color: #666666;
        box-shadow: 0px 3px 0px rgb(204, 204, 204);
    }

</style>

<div id="${id!}" class="hls-tab hls-width-inherit ${class!}" <#if style??> style="${style!}"</#if>>
    <ul id="hlsTab" style="width:inherit">

    </ul>
    <div style="clear:both"></div>
</div>


<script type="text/javascript">
    (function () {
        var config = ${config};
        ${id!'hlsTab'} = new HlsTab();
        ${id!'hlsTab'}._init(config);
    })();
</script>



