tab标签切换（一句话切换显示隐藏）

<div class="wrapper">
    <div class="tab">
        <div class="tabtt">
            <ul class="clearfix">
                <li class="current">
                    <a href="javasrcipt:;">标题1</a>
                </li>
                <li>
                    <a href="javasrcipt:;">标题2</a>
                </li>
                <li>
                    <a href="javasrcipt:;">标题3</a>
                </li>
            </ul>
        </div>
        <div class="tabcon">
            <div class="con" style="display: block;">
                我是内容我是内容
            </div>
            <div class="con">
                我是内容我是内容
            </div>
            <div class="con">
                我是内容我是内容。
            </div>
        </div>
    </div>    
</div>

<style type="text/css">

a{color: #000;}
.tab{
    position: relative;
    width: 300px;
    margin: 20px auto;
}
.tabtt{
    position: relative;
    z-index: 50;
}
.tabtt li{
    float: left;
    margin-right: 5px;
}
.tabtt li a{
    display: block;
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
    border:1px solid #d3d3d3;
    background: #eee;
    color: #999;
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
}
.tabtt li a:hover,.tabtt li.current a{
    color: #000;
    background: #fff;
    border-bottom:1px solid #fff;
}
.tabcon{
    position: relative;
    padding: 10px;
    margin-top: -1px;
    border:1px solid #d3d3d3;
}
.con{ display: none;}
</style>

<script type="text/javascript">
    $(function(){
        $(".tabtt ul li").click(function(){
            $(this).addClass("current").siblings().removeClass("current");
            $(".con").hide().eq($(".tabtt ul li").index(this)).show();
        });
    });
</script>