一个js封装的不错的选项卡效果代码

2021-09-12 00:20:56分类：前端开发 / JavaScript 教程阅读(7247)评论(0)

在论坛里经常看到人问选项卡或者类似选项卡的切换效果 这里封装了个js，希望对大家有用 所有代码都在下面了 如果有错误或者建议，可以回贴告诉我，谢谢

复制代码 代码如下:





html中文网 选项卡效果 www.0133.cn


body{font-size:12px; font-family:Verdana,"宋体";}
p,ul{margin:0px; padding:0px;}
td,div{font-size:12px}
.a1_0 {border:1px dotted #3399FF; width:120px; background-color:#f5f5f5; margin:3px; padding:2px 0px; cursor:pointer;}
.a1_1 {border:1px solid #FF9900; width:120px; margin:3px; padding:2px 0px; cursor:pointer;}
.test{text-decoration:underline;}
#b1 div.s{border:1px solid #999999; width:90%; height:500px; margin:3px; padding:10px; overflow-y:auto; line-height:18px;}
#b1 div.s strong{color:#0066FF;}
/* */
.style1{float:left; width:80px; background-color:#f5f5f5; border:1px solid #3399FF; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
.style2{float:left; width:80px; background-color:#f5f5f5; border:1px solid #FF9900; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
.style3{float:left; width:80px; background-color:#f5f5f5; border:1px solid #666666; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
#a2,#a3,#a4,#a5,#a6,#a7,#a8 {height:22px;}
#b2 div,#b3 div,#b4 div,#b5 div,#b6 div,#b7 div{border:1px solid #FF9900; height:100px; width:400px; padding:5px; overflow-y:auto;}
#b8 div{border:1px solid #FF9900; height:20px; width:350px; padding:2px 5px;}
#b8 div a{margin-right:20px;}
.style4{float:left; background-color:#999999; text-align:left; list-style-type:none; padding:2px 5px; color:#FFFFFF;}




  
    
        简单介绍

        默认的onclick


        onmousover触发

        自动播放auto

        菜单导航
        关于嵌套
        其他应用
        一些说明
         
         
         
         
    
    
        
            封装了一个选项卡，不过已经不像选项卡了-_-!!!


            现稍微说明下吧，如果不明白的话，旁边有几个例子可能说明起来更清楚些


            


            obj.bind = ["a1","td","b1","div"];

            绑定id="a1"下的td标签为菜单，绑定id="b1"下的div标签为内容，简单么？

            td标签的数量和div标签的数量必须相同

            （若不需要显示内容，只显示菜单话，可以这个在td标签上加）

            如果id="a1"下的td标签有嵌套表格，这样的话，就不是所有的td都是菜单，这时候需要用下nesting



            obj.nesting = [false,true,"",""];

            当标签tag有嵌套时，需要用到这个

            比如选项卡内容是放在div容器里，而本身这个内容里也有div标签，这时就需要用到

            菜单嵌套为false，内容嵌套为true，且会自动判断出内容标签，多数时候这样就可以了

            判断方法为，认定getElementsByTagName后第一个标签为内容第一项，其他的就用这个第一项的深度来判断

            但有些情况下，这样还是不行

            我用后面2个参数做id来指定菜单或者内容的第一项nesting = [false,true,"","q2"];

            这样就肯定不会错了（不明白的话看下例子就简单多了）



            obj.index = 0;

            默认显示第几个选项卡，序号从0开始



            obj.style = ["c1","c2","c3"]

            菜单加载的样式的className：

            菜单未选中的className是c1

            菜单选中的className是c2

            菜单onmouseover的className是c3



            obj.overStyle = false;

            选项卡是否有onmouseover, onmouseout变换样式事件[非激活选项卡内容]，对应的样式为style[2]



            obj.overChange = false;

            选项卡内容是否用onmouseover, onmouseout直接激活



            obj.menu = false;

            选项卡是菜单类型


            obj.auto = [false, 1000];

            选项卡是否自动播放，播放速度（毫秒）



            obj.creat();

            开始生成选项卡，需要onclick触发事件的话，可以obj.creat(函数名)

            所有的都会触发
            


        
        
        
          
            

                  
  • 1

    •               
  • 2

    •               
  • 3

    •               
  • 4

    •             

          
          
            
这个例子是用onclick触发的
并设置overStyle = true;
(over，out改变样式,但不激活)

            

                var bba = new opCard();

                bba.bind = ["a2","li","b2","div"];

                bba.style = ["style1","style2","style1"];

                bba.overStyle = true;

                bba.creat();

                bba = null;
            

            
33333

            
4444444

          

        
          
            

                  
  • 1

    •               
  • 2

    •               
  • 3

    •               4
                

          
          
            

                这个例子是比上面增加skip="true"
即4
所以选项卡4是没有内容的

                你可以为选项卡的文字直接加上链接，我这里就不加了
            

            
222222

            
33333

            
4444444

          
        
        
        
          
            

                  
  • 1

    •               
  • 2

    •               3
                  
  • 4

    •             

          
          
            
这个例子是用onmouseover触发的
(over，out直接激活)
并且3[选项卡3不会被激活]
overStyle = true;

            

                var cc = new opCard();

                cc.bind = ["a4","li","b4","div"];

                cc.style = ["style1","style2","style1"];

                cc.overStyle = true;

                cc.overChange = true;

                cc.creat();

                cc = null;
            

            
33333

            
4444444

          
        
        
        
          
            

                  
  • 1

    •               
  • 2

    •               
  • 3

    •               
  • 4

    •             

          
          
            
1111111
我每3秒切换一个选项卡

            

                var ee = new opCard();

                ee.bind = ["a6","li","b6","div"];

                ee.style = ["style1","style2","style1"];

                ee.auto = [true, 2000];

                ee.overChange = true;

                ee.creat();

                ee = null;
            

            
33333
我每3秒切换一个选项卡

            
4444444
我每3秒切换一个选项卡

          
          
注：鼠标在选项卡任意位置都会使停止播放

下面这个结合overChange一起

          
          
            

                  
  • 1

    •               
  • 2

    •               
  • 3

    •               
  • 4

    •             

          
          
            
1111111
我每2秒切换一个选项卡

            

                var dd = new opCard();

                dd.bind = ["a5","li","b5","div"];

                dd.style = ["style1","style2","style1"];

                dd.auto = [true, 3000];

                dd.creat();

                dd = null;

            

            
33333
我每2秒切换一个选项卡

            
4444444
我每2秒切换一个选项卡

          
          

下面这个再来个3，且overStyle=true;

          
          
            

                  
  • 1

    •               
  • 2

    •               3
                  
  • 4

    •             

          
          
            
1111111
我每1秒切换一个选项卡

            

                var ff = new opCard();

                ff.bind = ["a7","li","b7","div"];

                ff.style = ["style1","style2","style1"];

                ff.auto = [true, 1000];

                ff.overChange = true;

                ff.overStyle = true;

                ff.creat();

                ff = null;
            

            
33333
我每1秒切换一个选项卡

            
4444444
我每1秒切换一个选项卡

          
        
        
        
          
            

                  首页
                  
  • 新闻

    •               
  • 论坛

    •               联系我们
                

          
          
            

            
国内新闻国际新闻娱乐新闻体育新闻

            
蓝色理想blue idea

            

          
          
注：菜单延时一秒关闭
这里只是演示，实际可以设置下position什么的。-o-
多级菜单不知道能不能支持，没试过

        
        
            我见过的许多选项卡都不能用来嵌套
但还是有些时候会用到的

            所以如您所见，这个演示本身就是一个嵌套，效果还不错
        
        
        
            比如图片切换什么，不过我太懒了，不写了。。。

            这个能干什么，我也不知道。。
            
              
  • 新年好啊

    •               
  • 快过年了

    •               
  • 天好冷啊

    •               
  • 大家去抢红包吧

    •               
  • 红包~！红包~！你在哪里啊？

    •                         

            
            
                选项卡标题（或者菜单）必须和选项卡内容的数量相同，否则会出错
    即使选项卡菜单skip="true"，内容也要放一个空的标签占位

                其他好像暂时没发现什么


                本来打算加入ajax的，但有些还没想好。

                效率的话，应该还行，我这个演示放了几个选项卡，似乎还不错


                写这个的目的就是以后弄选项卡只要处理样式就可以了，很多选项卡或者切换之类都是大同小异

                本来是打算弄些特效在里面，考虑会增加不少代码，所以不加了，简洁点。



                哦，还有选项卡是附加样式，不会取消原本设置的样式

                如左边的下划线是原有的样式
            
            啥都没有1
            啥都没有2
            啥都没有3
            啥都没有4
        
      




    以上就是一个js封装的不错的选项卡效果代码的详细内容，更多请关注0133技术站其它相关文章！

    赞(0) 打赏
    未经允许不得转载：0133技术站首页 » JavaScript 教程

    相关文章

    前端开发

    HTML 教程CSS 教程JavaScript 教程Vue.js 教程Node.js 教程

    置顶推荐

    猜你喜欢