10_div+tab实现选项卡教学.ppt

Div+css+javascript ---实现tab效果 仅 功能实现 实现标题层 div span内容一/span span 内容二/span span 内容三/span /div 实现内容层 div div 第一块内容区域/div div 第二块内容区域/div div 第三块内容区域/div /div 隐藏第二、第三个内容层 div div 第一块内容区域/div div style=display:none;第二块内容区域/div div style=display:none;第三块内容区域/div /div 用id标记每个内容块，以便于调用 div div id=zidiv1第一块内容区域/div div id=zidiv2 style=display:none;第二块内容区域/div div id=zidiv3 style=display:none;第三块内容区域/div /div 功能分析 当鼠标移动到每个span标题文字时候，显示每个标题所对应的内容所在的div块 则需要在span标记内添加移动事件，事件的内容为调出相应块，并隐藏其他块- - -用函数实现 添加事件： div span onmousemove=“函数名称内容一/span span onMouseMove=函数名称内容二/span span onMouseMove=函数名称内容三/span /div ＊创建函数，实现对应功能 function divchange(divid){ document.getElementById(zidiv1).style.display=none; document.getElementById(zidiv2).style.display=none; document.getElementById(zidiv3).style.display=none; document.getElementById(divid).style.display=block; } 含义：先将所有层都隐藏，再将当前层（鼠标指向的内容所在的层）显示。 效果参见 ：tab1.html ＊扩展--创建函数，实现对应功能 function divchange(divindex,divname,divcount){ for(i=1;i=divcount;i++) { document.getElementById(divname+i).style.display=none; } document.getElementById(divname+divindex).style.display=block; } 在head部分添加函数 script language=javascript type=text/javascript function divchange(divindex,divname,divcount){ for(i=1;i=divcount;i++) { document.getElementById(divname+i).style.display=none; } document.getElementById(divname+divindex).style.display=block; } /script 在body里面对应的span处调用 div span onmousemove=JavaScript:divchange(1,zidiv,3)内容一/span span onMouseMove=JavaScript:divchange(2,zidiv,3)内容二/span span onMouseMove=JavaScript:divchange(3,zidiv,3)内容三/span /div 注意：双引号中不能在使用双引号，而应该使用单引号 可以在此功能的基础上，添加各种样式来修饰页面效果 例如：添加鼠标移动到标题时候的手型鼠标样式显示。 style type=text/css span{ cursor:pointer; } /style * * 1.功能：a先将三个块都设为不显示；b再将对应块设置为显示 2.a的实现：使用循环语句，从1循环到总数，将对应块设为不显示 3.此程序写法，便于扩充块的数量。将块理解为数组，拥有共同的名称和不同的index 注意：此处使用JavaScript脚本语言书写，该语言严格区分大小写。如将getElementById写成getelementbyid则发生错误。 效果参见：tab2.html