前端tab的用法经典案例（代码）方便以后经常使用

最新推荐文章于 2024-07-13 16:46:11 发布

沈行的专栏

最新推荐文章于 2024-07-13 16:46:11 发布

阅读量823

点赞数

分类专栏： Javescript

本文链接：https://blog.csdn.net/walk_man_3/article/details/99626170

版权

直接放到html页面中就可以看效果

<!DOCTYPE html>  
    <html>  
    <head>  
    <meta charset="utf-8">  
    <meta name="tips" content="为了以后方便，把常用的小效果制作整理，如有问题或者更好的方法，请告知！谢谢！！！！">  
    <meta name="tips" content="不写乱七八糟的的描述，大家直接复制即何使用，涉及到调用JS文件的注意一下路径问题。用最简洁的方法，描述一些基本原理。">  
    <title></title>  
    <style type="text/css">  
    body{font-size:12px;padding:0;margin:0;}   
    ul,li,dl,dd{list-style:none;padding:0;margin:0;}  
    .clr:after{content:".";display:block;height:0;clear:both;overflow:hidden;}  
    .clr{*zoom:1}  
    .rgTab{width:90%;margin:50px auto;}  
    .btnTabs{width: 90%;margin-left:1px;}  
    .btnTabs b,.btnTabs li,.btnTabs a{  
        float:left;width:33%;height:30px;display:inline-block;  
        line-height:30px;text-align:center;font-