卡片效果的导航页面_页面背景特效

卡片效果的导航页面,您可以先修改部分代码再运行.

<!--要完成此效果需要三个步骤

第一步：把如下代码加入到<head>区域中-->

.selTab    {    border-left:solid thin white;
            border-top:solid thin white;
            border-right:solid thin black;
            font-weight:bold;
            text-align:center}

</style>
<script LANGUAGE="JavaScript">

function public_Labels(label1, label2, label3, label4, label5, label6,

label7){
    
    t1.innerText = label1;
    t2.innerText = label2;
    t3.innerText = label3;
    t4.innerText = label4;
    t5.innerText = label5;
    t6.innerText = label6;
    t7.innerText = label7;
}

//a public function that the container uses to pass in values for the

card containers
function public_Contents(mrcs1, mrcs2, mrcs3, mrcs4,

mrcs5, mrcs6, mrcs7){

t1Contents.innerHTML = mrcs1;
    t2Contents.innerHTML = mrcs2;
    t3Contents.innerHTML = mrcs3;
    t4Contents.innerHTML = mrcs4;
    t5Contents.innerHTML = mrcs5;
    t6Contents.innerHTML = mrcs6;
    t7Contents.innerHTML = mrcs7;

init();
}

//sets the default display to tab 1
function init(){
    tabContents.innerHTML = t1Contents.innerHTML;
}

//this is the tab switching function
var currentTab;
var tabBase;
var firstFlag = true;

function changeTabs(){

if(firstFlag == true){
        currentTab = t1;
        tabBase = t1base;
        firstFlag = false;
    }

if(window.event.srcElement.className == "tab"){

currentTab.className = "tab";

tabBase.style.backgroundColor = "white";

currentTab = window.event.srcElement;

tabBaseID = currentTab.id + "base";

tabContentID = currentTab.id + "Contents";

tabBase = document.all(tabBaseID);

tabContent = document.all(tabContentID);

currentTab.className = "selTab";
        
        tabBase.style.backgroundColor = "";

tabContents.innerHTML = tabContent.innerHTML;

}
}

</script>

.selTab    {    border-left:solid thin white;
            border-top:solid thin white;
            border-right:solid thin black;
            font-weight:bold;
            text-align:center}

</style>
<script LANGUAGE="JavaScript">

function public_Labels(label1, label2, label3, label4, label5, label6,

//a public function that the container uses to pass in values for the

card containers
function public_Contents(mrcs1, mrcs2, mrcs3, mrcs4,

mrcs5, mrcs6, mrcs7){

init();
}

//sets the default display to tab 1
function init(){
    tabContents.innerHTML = t1Contents.innerHTML;
}

//this is the tab switching function
var currentTab;
var tabBase;
var firstFlag = true;

function changeTabs(){

if(firstFlag == true){
        currentTab = t1;
        tabBase = t1base;
        firstFlag = false;
    }

if(window.event.srcElement.className == "tab"){

currentTab.className = "tab";

tabBase.style.backgroundColor = "white";

currentTab = window.event.srcElement;

tabBaseID = currentTab.id + "base";

tabContentID = currentTab.id + "Contents";

tabBase = document.all(tabBaseID);

tabContent = document.all(tabContentID);

currentTab.className = "selTab";
        
        tabBase.style.backgroundColor = "";

tabContents.innerHTML = tabContent.innerHTML;

}
}

</script>

<div
STYLE="position:absolute; top:20; height:350; width:500; left:65;

border:none thin gray">

<table STYLE="width:600; height:350" CELLPADDING="0" CELLSPACING="0"

bgcolor="c0c0c0">
  <tr>
    <td ID="t1" CLASS="selTab" HEIGHT="25">选项 1</td>
    <td ID="t2" CLASS="tab">选项 2</td>
    <td ID="t3" CLASS="tab">选项 3</td>
    <td ID="t4" CLASS="tab">选项 4</td>
    <td ID="t5" CLASS="tab">选项 5</td>
    <td ID="t6" CLASS="tab">选项 6</td>
    <td ID="t7" CLASS="tab">选项 7</td>
  </tr>
  <tr>
    <td ID="t1base" STYLE="height:2; border-left:solid thin

white"></td>
    <td ID="t2base" STYLE="height:2; background-color:white"></td>
    <td ID="t3base" STYLE="height:2; background-color:white"></td>
    <td ID="t4base" STYLE="height:2; background-color:white"></td>
    <td ID="t5base" STYLE="height:2; background-color:white"></td>
    <td ID="t6base" STYLE="height:2; background-color:white"></td>
    <td ID="t7base" STYLE="height:2; background-color:white;

border-right:solid thin white"></td>
  </tr>
  <tr>
    <td HEIGHT="*" COLSPAN="7" ID="tabContents"
    STYLE="    border-left:solid thin white;border-bottom:solid thin

white;border-right:solid thin white">sample 
    mrcs</td>
  </tr>
</table>
</div><div CLASS="conts" ID="t1Contents">

<body onclick="changeTabs()" onload="init()">

所属频道：页面背景特效/更新时间：2012-12-19

[收藏][报错][返回列表]

卡片效果的导航页面_页面背景特效

页面背景特效Rss订阅特效代码搜索

页面背景特效推荐

猜你也喜欢看这些