jquery封装选项卡

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/boyit0/article/details/84454286

<style type="text/css"> 
ul,li,div{ margin:0; padding:0;}  
ul,li{ list-style:none;}  
.tabWrap{ width:450px; margin:0 auto 50px; overflow:hidden;}  
.tab{ background:#F93; overflow:hidden; width:450px;}  
.tab li{ float:left; width:150px; color:#fff; text-align:center; cursor:pointer; height:22px; line-height:22px;}  
.tab li.on{background:#F60;}  
.tabContent .p-content{ padding:20px; border:1px solid #ddd; border-top:0 none; }  
.tabContent .hide{ display:none;}  
</style> 
 <div class="tabWrap"> 
        <ul class="tab"> 
            <li>选项卡1</li> 
            <li>选项卡2</li> 
            <li>选项卡3</li> 
        </ul> 
        <div class="tabContent"> 
            <div class="p-content">1111</div> 
            <div class="p-content hide">222</div> 
            <div class="p-content hide">3333</div> 
        </div> 
    </div> 


<div class="zsContWrap">
                <!--横向菜单-->
                <ul class="zsContMenu clearfix">
                    <li class="on"><a href="javascript:;">标签1</a></li>
                    <li><a href="javascript:;">标签2</a></li>
                </ul>
                <!--切换内容-->
                <div class="zsCont">
                    <!--标签1 对应展示 内容-->
                    <div>
                        
                    </div>
                    <!--标签2 对应展示内容-->
                    <div class="hide">
                    </div>
                </div>
            </div>
<script type="text/javascript">
<!--一-->
function tab(menus, conts) {
    $(menus).click(function() {
        var index = $(this).index();
        $(this).addClass("on").siblings().removeClass("on");                        
        $(conts).eq(index).removeClass("hide").siblings().addClass("hide");
    })
}
tab(".zsContMenu li", ".zsCont div")

<!--二-->
function tabs(tabMenu,on,tabContent){  
        $(tabContent).each(function(){  
            $(this).children().eq(0).show();      
        });   
        $(tabMenu).each(function(){  
            $(this).children().eq(0).addClass(on);    
        });  
        $(tabMenu).children().hover(function(){  
            $(this).addClass(on).siblings().removeClass(on);  
            var index = $(tabMenu).children().index(this);  
            $(tabContent).children().eq(index).show().siblings().hide();      
        });  
    }  
    tabs(".tab","on",".tabContent");  
</script>	
/*class名字解释
on：选中状态时标签的样式
hide{display：none；}特别注意，样式的优先级*/