一款jquery写出来的tab切换

当时做这个的时候，当前状态是不规则的，li对应的有3块内容，分别设定不同背景图片，只显示当前的一个背景，鼠标移上去的时候其余2个用background-position: -1000px 0px;来隐藏，用jquery找到他的同辈给有一个样式background-position: 0px 0px;

html部分：

<div class="gold_list">
    <ul>
        <li class="ino_a hover" style="background-position:0 0;">1.填写详细信息</li>
        <li class="ino_b" >2.确定保单信息</li>
        <li class="ino_c">3.支付</li>
    </ul>
</div>
<div class="table_gold2">
    <div class="table_conter" >
        1111111111
        </div>
    <div class="table_conter" style="display:none; height: 300px; background: green;">222222222222</div>
    <div class="table_conter" style="display:none; height: 600px; background: blue;">33333333333333</div>
</div>

css部分：

 <style>
     * { margin:; padding:; }
     .gold_list{width:945px;  height:48px;  margin:auto; padding-top: 30px;}
     .gold_list ul{position:relative; height:48px;}
     .gold_list ul li{ line-height:48px; cursor:pointer; float:left; position:absolute;text-align:center;
         color:#333333; font-size:16px; top:0px;}
     .gold_list ul .ino_a{  left:0px;}
     .gold_list ul .ino_b{  left:315px;}
     .gold_list ul .ino_c{  left:630px;}
     .gold_list ul .ino_a, .gold_list ul .ino_b, .gold_list ul .ino_c,
     .gold_list ul .ino_a.hover, .gold_list ul .ino_b.hover, .gold_list ul .ino_c.hover
     {width:315px; height:48px;font-weight:bold;">#f5f5f5;background-repeat: no-repeat;
         background-position: -1000px 0px;overflow: hidden;}
     .gold_list ul .hover{color: #ffffff;}
     .gold_list ul .ino_a{background-image:url(images/c.png); }
     .gold_list ul .ino_b{background-image:url(images/ba.png);}
     .gold_list ul .ino_c{background-image:url(images/a.png);}
     .table_gold2, .table_conter{width:945px; height: auto; overflow: hidden; margin:auto;}
 </style>

jquery部分：

//tab 切换
$(function(){
    $('.gold_list li').mouseover(function() {
        $(this).addClass('hover');
        $(this).siblings().removeClass('hover');
        $(this).siblings().attr("style",""); //属性值,可设置
        $(this).css("background-position","0px 0px");
        $('.table_conter').eq($(this).index()).show().siblings().hide();
    })
})

效果图：

不明白的伙伴可自行下载查看：

链接: http://pan.baidu.com/s/1o7Wnk2Q 密码: 72k8