[导入]DIV+CSS+js制作圆角选项卡效果_html/css

相关CSS:

/*圆角框*/
b.rtop, b.rbottom{
display:block;
background: #6695
}
b.rtop b, b.rbottom b{
display:block;height: 1px;
overflow: hidden;
background: #81a6b3
}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

这段代码就很容易明白,就是填充每一行,然后设置不同的左右边距,就实现了圆角效果,相关CSS的设置可以参考CSS2.0中文手册.

2:选项卡效果的实现

找工作

找人才
找新闻

1. 测试11111111

1. 测试2222222222222

1. 测试333333333

看完这个其实大家就知道了,选项卡就是把每个选项里的内容放在一个DIV里,当前显示一个,其它全部隐藏,当鼠标单击其他选项时,就显示相应的选项.

CSS代码如下:

.TopTen .hiddencontent
{
display: none;
}
.TopTen .activecontent
{
text-align: justify;
padding: 2px;
border: 0px solid;
z-index: 2;
}
a.active {
background:#6795; }

JS代码如下:

tabCount = 3;
function changeTab(tabIndex)
{
for (i = 1; i <= tabCount; i++)
{
tab = document.getElementById("TopTenTab" + i);
content = document.getElementById("TopTenContent" + i);

if (i == tabIndex)
{
tab.className = "active";
content.className = "activecontent";

}
else
{
tab.className = "";
content.className = "hiddencontent";
}
}
}

这些就不在多少 ,大家就仔细看看就全部明白了.

PS:如果要实现鼠标移动到某个选项就显示相应内容,只需要把onclick="changeTab(3);" 改为:onmouseover="changeTab(3);" onclick="return false;" 即可,其它依次类推!