選項(xiàng)卡具有占用篇幅小，輻射內(nèi)容大的特點(diǎn)。 這里所說(shuō)的選項(xiàng)卡效果是要在Web頁(yè)面實(shí)現(xiàn)的，并非應(yīng)用程序里的菜單選項(xiàng)，在網(wǎng)頁(yè)中應(yīng)用選項(xiàng)卡可以使網(wǎng)頁(yè)顯得更緊湊，結(jié)合AJAX技術(shù)可以使頁(yè)面在有限的空間內(nèi)展現(xiàn)更多的內(nèi)容。

以下是引用片段：

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"

}

分類類型

游戲下載

游戲下載

游戲下載

第一個(gè)里面的內(nèi)容關(guān)閉

第二個(gè)里面的內(nèi)容關(guān)閉

第三個(gè)里面的內(nèi)容關(guān)閉

沒(méi)有選擇類型

游戲下載

游戲下載

游戲下載

第四個(gè)里面的內(nèi)容關(guān)閉

第五個(gè)里面的內(nèi)容關(guān)閉

第六個(gè)里面的內(nèi)容關(guān)閉

沒(méi)有選擇類型

文章主要介紹一種簡(jiǎn)潔的選項(xiàng)卡效果的實(shí)現(xiàn)，兼容性較好，方便大家直接使用。雖然我是做相關(guān)軟件編程的，但是，我對(duì)這些的知識(shí)也是非常喜歡，業(yè)余愛(ài)好手，也可以稱發(fā)燒友。呵呵！

更多信息請(qǐng)查看IT技術(shù)專欄