[导入]仿windows选项卡效果

终于在经典论坛找到了一个梦寐以求的选项卡效果，这个效果与众不同的是只要鼠标移上选项就可以了，


HTML代码


无标题文档

var txtstr_1=" QQ:28983016 Email:451200@126.com";
var txtstr_2=" 需要软件的朋友可以与我联系。";
var txtstr_3=" 论坛现在暂时关闭，请朋友们在QQ上联系."
var txtstr_4=" 孤独的时候便走向自然；
寂寞的时候便走向音乐；
失败的时候便走向憧憬；
委屈的时候便走向创造和友情。
"
function changediv(n){
for(i=1;i<=5;i++){
eval("document.getElementById('s'+i+'').className='under'+n+''");
//此次循环的作用是分别将s开头的ID处的下边界设置为相应的颜色
}
for(i=1;i<=4;i++){
eval("document.getElementById('c"+i+"').className='a"+n+"'");
//此次循环初始化所有的选项卡按钮的背景图片为cb0.gif，银灰色
}
eval("document.getElementById('c"+n+"').className='t"+n+"'");
//然后设置鼠标移动到的相应位置的背景图片为相应的图片，修改对应的样式表。
eval("document.getElementById('bodyt').className='body"+n+"'");
//修改选项卡下半部的样式，使其的色彩与上半部的图片相适应。
bodytxt=eval('txtstr_'+n);
if(bodytxt==""){
alert("数据正在下载，请稍候!");}
else
{
document.getElementById("txt1").innerHTML=bodytxt;
//设置选项卡主体部分相应的文字。
}
}

我佛山人

红色黑客

蓝色月光

孤零飘客

document.write(txtstr_1);

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
另外这是一个竖向的效果：


HTML代码

test

td,a,body{font-size:9pt;}
.DivAround_focus{cursor:pointer;background-color:#A1ACDB;border-right:solid 1px #A1ACDB;border-bottom:solid 1px #333333; border-left:solid 1px #C8CEEA; border-top:solid 1px #C8CEEA;color:#000000}
.DivAround_blur{cursor:pointer;background:#4D5C9F;border-right:solid 1px #eeeeee;border-bottom:solid 1px #333333; border-left:solid 1px #798ACC; border-top:solid 1px #A1ACDB;color:#FFFFFF}
.DivAround_content{background-color:#A1ACDB;border-right:solid 1px #888888;border-bottom:solid 1px #555555; border-left:0px; border-top:solid 1px #C8CEEA;}

var AroundInfoArray=new Array();
AroundInfoArray[0]="咖啡厅的内容";
AroundInfoArray[1]="学校的内容";
AroundInfoArray[2]="酒店的内容";
function ChangeFocus(obj)
{
for(i=0;i

咖啡厅 学校 酒店

内容

ChangeFocus(document.getElementById("leftButtonTAble").rows[0].cells[0]);

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
还有这个的背景变换：


HTML代码http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

无标题文档

function switchTag(tag,content)
{
// alert(tag);
// alert(content);
for(i=1; i <6; i++)
{
if ("tag"+i==tag)
{
document.getElementById(tag).getElementsByTagName("a")[0].className="selectli"+i;
document.getElementById(tag).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="selectspan"+i;
}else{
document.getElementById("tag"+i).getElementsByTagName("a")[0].className="";
document.getElementById("tag"+i).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="";
}
if ("content"+i==content)
{
document.getElementById(content).className="";
}else{
document.getElementById("content"+i).className="hidecontent";
}
document.getElementById("content").className=content;
}
}

首页

下载中心

产品介绍

会员注册与登录

联系我们

仿淘宝网站的导航效果。此方法有几个优点：

1、根据字数自适应项目长度
2、不同的项目使用不同的颜色来区分
3、这回需要使用到js了，呵呵
4、背景图片只需要两个图片文件就足够，减少服务器负担
5、这是使用到的两个图片：

http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif" border="0" >

http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif" border="0" >

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
文章来源:http://thw.568idc.com/blog/default.asp?id=1070