一个基于jquery的选项卡

自己用jquery写的一个选项卡

HTML部分

<div class="user_tabs">
    <ul class="tabs clearfix" id="tabs">
        <li id="tab0" class="current"><span>tab1</span></li>
        <li id="tab1"><span>tab2222</span></li>
        <li id="tab2"><span>tab333333333</span></li>
    </ul>
    <div class="tabs_panes" id="conts">
        <div id="cont0" class="tabs_con" style="display:block">
            tab1
        </div>
        <div id="cont1" class="tabs_con" style="display:none;">
            tab2
        </div>
        <div id="cont2" class="tabs_con" style="display:none;">
            tab3
        </div>
    </div>
</div>

 

CSS部分

/*reset*/
*{margin:0; padding:0; font-size:12px; list-style:none;}

/* tabs */
.user_tabs {width:300px;}
.user_tabs .tabs {height:31px; border-bottom:1px solid #cdcdcd;}
.user_tabs .tabs li,
.user_tabs .tabs span {height:32px; line-height:32px; display:block; float:left; position:relative; font-size:14px; font-weight:700;
cursor:pointer; background:url(http://images.cnblogs.com/cnblogs_com/ruegy/383221/o_tabs_bg_2.gif) no-repeat;}
.user_tabs .tabs li {margin:0 6px -1px 0; padding-left:15px;}
.user_tabs .tabs span {padding-right:15px; background-position:100% -33px;}
.user_tabs .tabs li.current {background-position:0 -66px;}
.user_tabs .tabs li.current span {color:#fff; background-position:100% -99px;}
.user_tabs .tabs_panes {clear:both;}

 

js部分

<script type="text/javascript" src="https://files.cnblogs.com/ruegy/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('#tabs li').mouseover(function(){
            var index=$("#tabs li").index(this);
            $('#tabs li').removeClass('current');
            $(this).addClass('current');
            $('#conts .tabs_con').hide();
            $('#cont'+index).show();
        })
    })
</script>