标题 | 网页选项卡的介绍 |
内容 | 选项卡具有占用篇幅小,辐射内容大的特点。 这里所说的选项卡效果是要在Web页面实现的,并非应用程序里的菜单选项,在网页中应用选项卡可以使网页显得更紧凑,结合AJAX技术可以使页面在有限的空间内展现更多的内容。 以下是引用片段: body { margin:0px; text-align:center; font-size:12px; } #divall { margin:auto; margin-top:35px; width:300px; height:200px; background-color:#7DA7D9; border:0px; } #title { width:300px; height:20px; font-size:14px; margin-top:4px; } #table1 table { width:300px; height:30px; font-size:12px; } #table2 table { width:300px; height:30px; font-size:12px; } #content1,#content2,#content3,#content4,#content5,#content6,#msg1,#msg2 { margin:auto; height:110px; width:290px; background-color:#eee; position:relative; } #content1 div,#content2 div,#content3 div,#content4 div,#content5 div,#content6 div { position:absolute; bottom:3px; right:3px; cursor:pointer; } a { text-decoration:none; } .changebordercolor { border-top:1px solid #369; border-left:1px solid #369; } .backbordercolor { border:0px solid red; } function msg(){ document.getElementById("msg1").style.display="none" document.getElementById("msg2").style.display="none" } function msgnone(ms,cont){ document.getElementById(ms).style.display='block' document.getElementById(cont).style.display='none' } function aa1(){ document.getElementById("content1").style.display="block" document.getElementById("content2").style.display="none" document.getElementById("content3").style.display="none" document.getElementById("content4").style.display="none" document.getElementById("content5").style.display="none" document.getElementById("content6").style.display="none" } function aa2(){ document.getElementById("content1").style.display="none" document.getElementById("content2").style.display="block" document.getElementById("content3").style.display="none" document.getElementById("content4").style.display="none" document.getElementById("content5").style.display="none" document.getElementById("content6").style.display="none" } function aa3(){ document.getElementById("content1").style.display="none" document.getElementById("content2").style.display="none" document.getElementById("content3").style.display="block" document.getElementById("content4").style.display="none" document.getElementById("content5").style.display="none" document.getElementById("content6").style.display="none" } function aa4(){ document.getElementById("content1").style.display="none" document.getElementById("content2").style.display="none" document.getElementById("content3").style.display="none" document.getElementById("content4").style.display="block" document.getElementById("content5").style.display="none" document.getElementById("content6").style.display="none" } function aa5(){ document.getElementById("content1").style.display="none" document.getElementById("content2").style.display="none" document.getElementById("content3").style.display="none" document.getElementById("content4").style.display="none" document.getElementById("content5").style.display="block" document.getElementById("content6").style.display="none" } function aa6(){ document.getElementById("content1").style.display="none" document.getElementById("content2").style.display="none" document.getElementById("content3").style.display="none" document.getElementById("content4").style.display="none" document.getElementById("content5").style.display="none" document.getElementById("content6").style.display="block" } 分类类型 游戏下载 游戏下载 游戏下载 第一个里面的内容关闭 第二个里面的内容关闭 第三个里面的内容关闭 没有选择类型 游戏下载 游戏下载 游戏下载 第四个里面的内容关闭 第五个里面的内容关闭 第六个里面的内容关闭 没有选择类型 文章主要介绍一种简洁的选项卡效果的实现,兼容性较好,方便大家直接使用。虽然我是做相关软件编程的,但是,我对这些的知识也是非常喜欢,业余爱好手,也可以称发烧友。呵呵! |
随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。