JQ基础练习---选项卡效果

<script type="text/javascript">//选项卡效果
$(document).ready(function(){
    
    $('.c_tabcon:gt(0)').hide();
    
    var ctab=$(".c_tab a")
    
    ctab.click(function(){
        
        $(".cpxxtab a").removeClass();
        $(this).addClass("active");
            
        var index = ctab.index(this)
        //ctab.removeClass().eq(index).addClass("active");
        $(".c_tabcon").eq(index).show().siblings().hide();
    
    });
});
</script>

 

<div class="c_tab">
                <a href="javascript:;" class="a1">考试性质</a>
                <a href="javascript:;">考试性质</a>
                <a href="javascript:;">考试性质</a>
                <a href="javascript:;">考试性质</a>
                <div class="clear"></div>
</div>
            
显示内容
<div class="">
<div class="c_tabcon">1</div>
<div class="c_tabcon">2</div>
<div class="c_tabcon">3</div>
<div class="c_tabcon">4</div>
</div>