Tab选项卡-白红宇

强烈建议你试试无所不能的chatGPT，快点击我

Tab选项卡

阅读量：6567 次

发布时间：2019-06-24

本文共 5023 字，大约阅读时间需要 16 分钟。

原生js实现：

            
            jQuery实现tab切换卡        
    
             *{margin:0;padding: 0;font-size:16px;}        ul li{list-style: none;}        #wrap{width:560px;margin:10px auto;border:1px solid grey;}        ul{width:560px;height:50px;line-height:50px;font-size:16px;text-align:center;margin-top:10px;}        ul li{width:100px;margin-left:10px;height:50px;float:left;background-color:#ccc;}        #div1,#div2,#div3,#div4,#div5{            width:520px;height:300px;background-color:pink;padding:10px;margin:10px auto;        }        ul li.oncolor{background-color:green;}                
     
              function func(nav,num){            if(nav.className=="oncolor"){                return;            }            else{                var divList = document.getElementById("wrap").getElementsByTagName("div");                var navList = document.getElementsByTagName("li");                for(var i=0;i
      
                       
       
                    
        
                         
         
          首页                
          
           生活                
           
            科技                
            
             理财                
             
              娱乐            
             
            
           
          
         
        
            
        
         信息展示1            
         
          信息展示2            
          
           信息展示3            
           
            信息展示4            
            
             信息展示5

jquery：

            
            jQuery实现tab切换卡        
    
             
     
              *{margin:0;padding: 0;font-size:16px;}        ul li{list-style: none;}        #wrap{width:560px;margin:10px auto;border:1px solid grey;}        ul{width:560px;height:50px;line-height:50px;font-size:16px;text-align:center;margin-top:10px;}        ul li{width:100px;margin-left:10px;height:50px;float:left;background-color:#ccc;}        #div1,#div2,#div3,#div4,#div5{         width:520px;height:300px;background-color:pink;padding:10px;margin:10px auto;        }        ul li.oncolor{background-color:green;}                
                   
      
             
       
               
        
         首页       
         生活
       
         科技
       
         理财
       
         娱乐
      
        
       
      
       
        信息展示1      
        
         信息展示2      
         
          信息展示3      
          
           信息展示4      
           
            信息展示5

效果图：

经典而且经常使用的demo，下面使用两种方式实现，主要的区别在于css文件。

实现方式一：

    
    
         
     实践题 - 选项卡    
     
          /* CSS样式制作 */     *{        margin: 0;     padding: 0;     font: 12px normal "Microsoft Yahei";    }     ul li{     list-style: none;    }    #tabs{     width: 290px;     padding:5px;     height: 150px;     margin:20px;    }      #tabs ul{     display: block;     height: 30px;     line-height: 30px;     border-bottom:2px solid red;    }     #tabs ul li{     background: #fff;     cursor: pointer;     float: left;     line-height: 29px;     height: 29px;     margin:0 3px;     border:1px solid #aaa;     border-bottom: none;     display: inline-block;     width: 60px;     text-align: center;    }    #tabs ul li.on{     border-top:2px solid red;     border-bottom:1px solid #fff;    }    #tabs div{     height: 120px;     line-height: 20px;border:1px solid #369;border-top: none;padding: 5px;    }    .hide{     display: none;    }        
      
           window.onload = function(){     var lists =document.getElementById("tabs").getElementsByTagName("li") ;     var divs = document.getElementById("tabs").getElementsByTagName("div");     for(var i=0;i
       
        
          
         
         
          
           房产
           家居
           二手房
          
          
           房产----宝贝，大家都喜欢
           
房产----宝贝，大家都喜欢
           
房产----宝贝，大家都喜欢
           
房产----宝贝，大家都喜欢
           
房产----宝贝，大家都喜欢
           
          
          
           家居----宝贝，大家都喜欢
           
家居----宝贝，大家都喜欢
           
家居----宝贝，大家都喜欢
           
家居----宝贝，大家都喜欢
           
家居----宝贝，大家都喜欢
           
          
          
           二手房----宝贝，大家都喜欢
           
二手房----宝贝，大家都喜欢
           
二手房----宝贝，大家都喜欢
           
二手房----宝贝，大家都喜欢
           
二手房----宝贝，大家都喜欢

实现方式二：

    
    
         
     实践题 - 选项卡    
     
          /* CSS样式制作 */     *{        margin: 0;     padding: 0;     font: 12px normal "Microsoft Yahei";    }     ul li{     list-style: none;    }    #tabs{     width: 290px;     padding:5px;     height: 150px;     margin:20px;    }      #tabs ul{     display: block;     height: 30px;     line-height: 30px;         }     #tabs ul li{     background: #fff;     cursor: pointer;     float: left;     line-height: 29px;     height: 29px;     margin:0 3px;     border:1px solid #aaa;     border-bottom: none;     display: inline-block;     width: 60px;     text-align: center;    }    #tabs ul li.on{     border-top:2px solid red;     border-bottom:1px solid #fff;    }    #tabs div{     height: 120px;     line-height: 20px;border:1px solid #369;border-top:2px solid red;padding: 5px;    }    .hide{     display: none;    }        
      
           window.onload = function(){     var lists =document.getElementById("tabs").getElementsByTagName("li") ;     var divs = document.getElementById("tabs").getElementsByTagName("div");     for(var i=0;i
       
        
          
         
         
          
           房产
           家居
           二手房
          
          
           房产----宝贝，大家都喜欢
           
房产----宝贝，大家都喜欢
           
房产----宝贝，大家都喜欢
           
房产----宝贝，大家都喜欢
           
房产----宝贝，大家都喜欢
           
          
          
           家居----宝贝，大家都喜欢
           
家居----宝贝，大家都喜欢
           
家居----宝贝，大家都喜欢
           
家居----宝贝，大家都喜欢
           
家居----宝贝，大家都喜欢
           
          
          
           二手房----宝贝，大家都喜欢
           
二手房----宝贝，大家都喜欢
           
二手房----宝贝，大家都喜欢
           
二手房----宝贝，大家都喜欢
           
二手房----宝贝，大家都喜欢

效果图：

转载于:https://my.oschina.net/zyxchuxin/blog/423943

你可能感兴趣的文章

基于php5.5使用PHPMailer-5.2发送邮件

InstallShield 2012 Spring新功能试用（16）: Suite/Advanced UI 或 Advanced UI安装程序能在安装时进行输入合法性校验与反馈...

基金项目的英文

《软件性能测试与LoadRunner实战教程》喜马拉雅有声图书上线

ios 字典转模型

类的生命周期

php apache用户写文件夹权限设置

浅析rune数据类型

普通用户开启AUTOTRACE 功能

游侠原创：推荐一款免费的Syslog转发工具

onAttachedToWindow和onDetachedFromWindow调用时机源码解析

根据Servlet的Filter自定义实现字符编码过滤器

oh-my-zsh安装与配置

1.7 文件目录管理及相关的命令使用方法

PDF中添加页面/合并 PDF 内容

JS仿FLASH特效可跳转回首页的CSS二级联动菜单

页面导入样式时，使用link和@import有什么区别？

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！

当前时间: 2025-01-22 13:38:48 当前IP: 18.119.166.141 联系邮箱:javaeecc@qq.com Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2

强烈建议你试试无所不能的CHAT-GPT，快点击我

强烈建议你试试无所不能的CHAT-GPT，快点击我