tab标签切换（无炫效果，简单的显示隐藏）

从最简单的效果开始写起，一个简单的JQ写出tab切换效果，很静态，没有任何的轮转特效，单纯的点击标签显示区域块。

附上代码：

HTML：

<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;">
                我是内容我是内容，对应标题1的内容。这就是个内容介绍。我是内容我是内容，对应标题1的内容。这就是个内容介绍。我是内容我是内容，对应标题1的内容。这就是个内容介绍。我是内容我是内容，对应标题1的内容。这就是个内容介绍。我是内容我是内容，对应标题1的内容。这就是个内容介绍。
            </div>
            <div class="con">
                我是内容我是内容，对应标题2的内容。这就是个内容介绍。我是内容我是内容，对应标题2的内容。这就是个内容介绍。我是内容我是内容，对应标题2的内容。这就是个内容介绍。我是内容我是内容，对应标题2的内容。这就是个内容介绍。我是内容我是内容，对应标题2的内容。这就是个内容介绍。
            </div>
            <div class="con">
                我是内容我是内容，对应标题3的内容。这就是个内容介绍。我是内容我是内容，对应标题3的内容。这就是个内容介绍。我是内容我是内容，对应标题3的内容。这就是个内容介绍。我是内容我是内容，对应标题3的内容。这就是个内容介绍。我是内容我是内容，对应标题3的内容。这就是个内容介绍。
            </div>
        </div>
    </div>    
</div>

CSS如下：

<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>

P.S.每个人都有自己的公用的CSS，所以一些的公用的CSS 在这里没有体现，需要自己填写。例如li的list-style属性等。

最讨人喜欢的JQ来了：

<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>

一向记不住语法的我Mark一下，说不定这次就记住了呢。(*^__^*)

tab标签切换（无炫效果，简单的显示隐藏）

相关推荐