文章详情

  • 游戏榜单
  • 软件榜单
关闭导航
热搜榜
热门下载
热门标签
php爱好者> php文档>网页选项卡的介绍

网页选项卡的介绍

时间:2011-06-13  来源:qinuo



 
   选项卡具有占用篇幅小,辐射内容大的特点。 这里所说的选项卡效果是要在Web页面实现的,并非应用程序里的菜单选项,在网页中应用选项卡可以使网页显得更紧凑,结合AJAX技术可以使页面在有限的空间内展现更多的内容。

以下是引用片段:
 
body {
margin:0px;
text-align:center;
font-size:12px;
}
#divall {
margin:auto;
margin-top:35px;
width:300px;

background-color:#7DA7D9;
border:0px;
}
#title {
width:300px;

font-size:14px;
margin-top:4px;
}
#table1 table {
width:300px;

font-size:12px;
}
#table2 table {
width:300px;

font-size:12px;
}
#content1,#content2,#content3,#content4,#content5,#content6,#msg1,#msg2 {
margin:auto;

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"
}

分类类型

游戏下载
游戏下载
游戏下载

第一个里面的内容关闭
第二个里面的内容关闭
第三个里面的内容关闭
没有选择类型

游戏下载
游戏下载
游戏下载

第四个里面的内容关闭
第五个里面的内容关闭
第六个里面的内容关闭
没有选择类型

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

文章由精油录入 

排行榜 更多 +
辰域智控app

辰域智控app

系统工具 下载
网医联盟app

网医联盟app

运动健身 下载
汇丰汇选App

汇丰汇选App

金融理财 下载