热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

选项卡js版封装

以下是封装函数:id:最外边大盒的id名functiontab(id,ev){varoWrapdocument.getElementById(id);

以下是封装函数:

// id:最外边大盒的id名
function tab(id,ev){
                var oWrap = document.getElementById(id);
                var aLi = oWrap.getElementsByTagName("li");
                var aDiv = oWrap.getElementsByTagName("div");                
                for(var i=0;i                    aLi[i].index = i;
                    aLi[i][ev]=function(){
                        // [ev]:触发的是什么事件,比如.onclick,这里用[参数],中括号中可以传递不同的事件
                        for(var i=0;i                            aLi[i].className="";
                        aDiv[i].className="";
                        }
                        this.className="active";
                    aDiv[this.index].className="show";
                    }
                }
            }

 

以下是格式:


        


            

                    
  • 新闻

  •                 
  • 体育

  •                 
  • 财经

  •             

            
NewsNewsNewsNewsNewsNews

            
playplayplayplayplayplay

            
financefinancefinancefinance

        

        
        

            

                    
  • 新闻

  •                 
  • 体育

  •                 
  • 财经

  •             

            
NewsNewsNewsNewsNewsNews

            
playplayplayplayplayplay

            
financefinancefinancefinance

        

    

 

以下是css样式及函数调用:


        
        

以后只需调用函数就可以了,可以将事件形式以实参的方式传进去,更改事件触发属性


推荐阅读
author-avatar
凡秘能
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有