选项卡具有占用篇幅小，辐射内容大的特点。 这里所说的选项卡效果是要在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"

}

分类类型

游戏下载

游戏下载

游戏下载

第一个里面的内容关闭

第二个里面的内容关闭

第三个里面的内容关闭

没有选择类型

游戏下载

游戏下载

游戏下载

第四个里面的内容关闭

第五个里面的内容关闭

第六个里面的内容关闭

没有选择类型

文章主要介绍一种简洁的选项卡效果的实现，兼容性较好，方便大家直接使用。虽然我是做相关软件编程的，但是，我对这些的知识也是非常喜欢，业余爱好手，也可以称发烧友。呵呵！

更多信息请查看IT技术专栏