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

做网站很多年.一直用TABLE布局网页,没有想到DIV+CSS的魅力如此之大,看了些资料.做了个简单而很使用的效果.圆角无刷新选项卡.单击以下地址预览(下载):

http://www.d000.cn/epark/attachments/file/css1.html

简单介绍一下重要代码:

1:圆角效果的实现

xhtml代码:

<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>

<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>

这句很简单,就是用<b>这个标签在网页占八行的位置(上边4行,下边4行)

相关CSS:

/*圆角框*/
b.rtop, b.rbottom{
    display:block;
 background: #668995
}
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:选项卡效果的实现

<div id="left">

                          <div id="serchclass1"><b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b><a id="TopTenTab1"  onclick="changeTab(1);" class="active" href="#">找工作</a>

</div>
                          <div id="serchclass2"><b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b><a id="TopTenTab2" onclick="changeTab(2);" href="#">找人才</a></div>
                          <div id="serchclass3"><b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b><a id="TopTenTab3"  onclick="changeTab(3);" href="#">找新闻</a></div>
                          <div id="serch">
    <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>            <dd class="TopTen">   
<div id="TopTenContent1" class="activecontent">
           <ol><li><a href='http://3453454' target='_blank' title='测试>测试11111111</a></li>
</ol>

                </div>

                <div id="TopTenContent2" class="hiddencontent">
           <ol><li><a href='http://3453454' target='_blank' title='测试>测试2222222222222</a></li>
</ol>

                </div>

                <div id="TopTenContent3" class="hiddencontent">
           <ol><li><a href='http://3453454' target='_blank' title='测试>测试333333333</a></li>
</ol>
               </div>
</dd>
    <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
                          </div>
                     </div>

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

CSS代码如下:

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

JS代码如下:

<script language="javascript">
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";
            }
        }
    }
</script>

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

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

 

文章来源:http://0839.d000.cn/default.asp?id=16