TAB切換效果

最新推荐文章于 2022-10-18 12:34:34 发布

原创最新推荐文章于 2022-10-18 12:34:34 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div #javascript #url #float #table

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

<style>

BODY {

FONT-SIZE: 12px; MARGIN: 0px; COLOR: #000000; LINE-HEIGHT: 150%

}

IMG {

BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px

}

FORM {

BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px; BORDER-RIGHT-WIDTH: 0px

}

TABLE {

TABLE-LAYOUT: fixed

}

TD {

MARGIN-LEFT: 0px; OVERFLOW: hidden; WHITE-SPACE: nowrap; LIST-STYLE-TYPE: none; TEXT-OVERFLOW: ellipsis

}

.qiehuan {

FLOAT: left; BORDER-BOTTOM: #ffa349 1px solid; HEIGHT: 24px

}

.qiehuan_on {

BACKGROUND: url("images2.files/I_NRQH_CURRENT.GIF") no-repeat; FLOAT: left; WIDTH: 64px; LINE-HEIGHT: 25px; HEIGHT: 25px; TEXT-ALIGN: center

}

.qiehuan_off {

BACKGROUND: url("images2.files/I_NRQH_GRAY.GIF") no-repeat; FLOAT: left; WIDTH: 64px; LINE-HEIGHT: 25px; HEIGHT: 25px; TEXT-ALIGN: center

}

A.qhaon {

COLOR: #ffffff; TEXT-DECORATION: none

}

A.qhaon:hover {

COLOR: #ffffff; TEXT-DECORATION: underline

}

A.qhaoff {

COLOR: #000000; TEXT-DECORATION: none

}

A.qhaoff:hover {

COLOR: #000000; TEXT-DECORATION: underline

}

</style>

function Q_$(o){return window.top.document.getElementById(o)}

var QieHuan_1 = "Shao1";

var QieHuan_2 = "YuYan1";

var QieHuan_3 = "ZhiYe1";

var QieHuan_4 = "IT1";

var QieHuan_5 = "XueLi1";

var QieHuan_6 = "Hot1";

var QieHuan_7 = "Member1";

var QieHuan_8 = "ZiLiao1";

var QieHuan_9 = "XinWen1";

function QieHuan(Tab,e)

{

var tID = e.id;

var DefaultTab = eval("QieHuan_" + Tab);

if (DefaultTab != tID)

{

var OFFCss = "qiehuan_off";

var ONCss = "qiehuan_on";

Q_$(DefaultTab).className = OFFCss;

e.className = ONCss;

if (Q_$(DefaultTab + "_a")) Q_$(DefaultTab + "_a").className = "qhaoff";

if (Q_$(DefaultTab + "_Div")) Q_$(DefaultTab + "_Div").style.display = "none";

if (Q_$(tID + "_a")) Q_$(tID + "_a").className = "qhaon";

if (Q_$(tID + "_Div")) Q_$(tID + "_Div").style.display = "";

switch(Tab)

{

case 1:

QieHuan_1 = tID;

break;

case 2:

QieHuan_2 = tID;

break;

case 3:

QieHuan_3 = tID;

break;

case 4:

QieHuan_4 = tID;

break;

case 5:

QieHuan_5 = tID;

break;

case 6:

QieHuan_6 = tID;

break;

case 7:

QieHuan_7 = tID;

break;

case 8:

QieHuan_8 = tID;

break;

case 9:

QieHuan_9 = tID;

break;

}

</script>

</head>

<body>

<DIV id=Shao1_Div style="CLEAR: both; DISPLAY: ">[赢在起点]·3-6幼儿启蒙课程</DIV>

<DIV id=Shao2_Div style="CLEAR: both; DISPLAY: none">[上财国际]·“我学我玩”08年国际夏令营</DIV>

<DIV id=Shao3_Div style="CLEAR: both; DISPLAY: none">[021美术]·亲子启智班</DIV>

</body>

</html>