经典TAB选项卡效果！！修正完整版+演示，要的进来下载了-领先建站CMS提供服务商我们专注于CMS建站产品的研发

11905 查看	27 回复

主题：经典TAB选项卡效果！！修正完整版+演示，要的进来下载了 [收藏主题]

转到：

deray 当前离线

238 主题	0 广播	0 粉丝

级别:二年级

用户积分:1484 分
登录次数:82 次
注册时间:2008/5/24
最后登录:2010/8/27

deray 发表于：2008/10/20 22:33:00 | 显示全部帖子查看该作者主题楼主

做考试题库就用#科汛在线考试系统!

最近看了这里的一条标签效果，很好看，但楼主很粗心，只是放出了DIV的布局，没有样式控制，对于新手来说，不太会使用，所以花了点时间去把它弄好再放上来给大家，希望喜欢！！！

演示地址：http://www.hrclass.cn

效果图

此主题相关图片如下：11.jpg

全部的代码如下：

原版修正版

<DIV class=first_center style="WIDTH: 308px; HEIGHT: 139px">
<DIV class=first_center_1 style="WIDTH: 300px; HEIGHT: 54px">
<DIV align=center>
<U><FONT color=#800080>{LB_首页头条}</FONT></U></DIV>
<DIV align=center>
<U><FONT color=#800080>{LB_首页标题不规则}</FONT></U></DIV></DIV>
<DIV id=cntR style="WIDTH: 302px; HEIGHT: 300px">
<DIV id=NewsTop>
<DIV id=NewsTop_tit style="WIDTH: 300px; HEIGHT: 24px">
<P class=topTit style="WIDTH: 115px; HEIGHT: 21px"><FONT size=2><FONT color=#ff0033> <FONT color=#083aa1>今日热门排行</FONT></FONT></FONT></P>
<P class=topC1 style="WIDTH: 46px; HEIGHT: 21px" value="1"><STRONG> 新闻</STRONG></P>
<P class=topC0 style="WIDTH: 46px; HEIGHT: 21px" value="2"><STRONG> 生活</STRONG></P>
<P class=topC0 style="WIDTH: 46px; HEIGHT: 21px" value="3"><STRONG> 咨讯</STRONG></P>
<P class=topC0 style="WIDTH: 46px; HEIGHT: 21px" value="4"><STRONG> 回族 </STRONG></P></DIV>
<DIV id=NewsTop_cnt><SPAN title="Don't delete me"></SPAN><SPAN class=dis>
<DIV align=right>{LB_首页生活排行}</DIV></SPAN><SPAN class=undis>
<DIV align=right>{LB_国内新闻排行}</DIV></SPAN><SPAN class=undis>
<DIV align=right>{LB_首页咨讯排行} </DIV></SPAN><SPAN class=undis>
<DIV align=right>{LB_首页本地排行}</DIV></SPAN></DIV>
<SCRIPT>
    var Tags=document.getElementById
('NewsTop_tit').getElementsByTagName('p');
    var TagsCnt=document.getElementById
('NewsTop_cnt').getElementsByTagName('span');
    var len=Tags.length;
    var flag=1;//修改默认值
    for(i=1;i<len;i++){
     Tags[i].value = i;
     Tags[i].onmouseover=function(){changeNav
(this.value)};
     TagsCnt[i].className='undis';

    }
    Tags[flag].className='topC1';
    TagsCnt[flag].className='dis';
    function changeNav(v){
     Tags[flag].className='topC0';
     TagsCnt[flag].className='undis';
     flag=v;
     Tags[v].className='topC1';
     TagsCnt[v].className='dis';
    }
   </SCRIPT>
</DIV></DIV><FONT style="BACKGROUND-COLOR: #eef7fc"></DIV>

去掉了头条的版本

<DIV id=cntR style="WIDTH: 250px; HEIGHT: 300px">
<DIV id=NewsTop>
<DIV id=NewsTop_tit style="WIDTH: 250px; HEIGHT: 24px">
<P class=topTit style="WIDTH: 100px; HEIGHT: 21px"><FONT size=2><FONT color=#ff0033> <FONT color=#083aa1>今日热门排行</FONT></FONT></FONT></P>
<P class=topC1 style="WIDTH: 35px; HEIGHT: 21px" value="1"><STRONG>新闻</STRONG></P>
<P class=topC0 style="WIDTH: 35px; HEIGHT: 21px" value="2"><STRONG>生活</STRONG></P>
<P class=topC0 style="WIDTH: 35px; HEIGHT: 21px" value="3"><STRONG>咨讯</STRONG></P>
<P class=topC0 style="WIDTH: 35px; HEIGHT: 21px" value="4"><STRONG>回族 </STRONG></P></DIV>
<DIV id=NewsTop_cnt><SPAN title="Don't delete me"></SPAN><SPAN class=dis>
<DIV align=right>{LB_规划}</DIV></SPAN><SPAN class=undis>
<DIV align=right>{LB_培训}</DIV></SPAN><SPAN class=undis>
<DIV align=right>{LB_薪酬} </DIV></SPAN><SPAN class=undis>
<DIV align=right>{LB_招聘}</DIV></SPAN></DIV>
<SCRIPT>
    var Tags=document.getElementById
('NewsTop_tit').getElementsByTagName('p');
    var TagsCnt=document.getElementById
('NewsTop_cnt').getElementsByTagName('span');
    var len=Tags.length;
    var flag=1;//修改默认值
    for(i=1;i<len;i++){
     Tags[i].value = i;
     Tags[i].onmouseover=function(){changeNav
(this.value)};
     TagsCnt[i].className='undis';

    }
    Tags[flag].className='topC1';
    TagsCnt[flag].className='dis';
    function changeNav(v){
     Tags[flag].className='topC0';
     TagsCnt[flag].className='undis';
     flag=v;
     Tags[v].className='topC1';
     TagsCnt[v].className='dis';
    }
   </SCRIPT>
</DIV></DIV><FONT style="BACKGROUND-COLOR: #eef7fc"></FONT></DIV></DIV></DIV>

CSS控制语法

BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; COLOR: black; LINE-HEIGHT: 150%; PADDING-TOP: 10px; BACKGROUND-COLOR: white; TEXT-ALIGN: center
}/*通用CSS，如果你的CSS已经定义了BODY可以去掉，不然会变样。*/
.dis {
DISPLAY: block
}
.undis {
DISPLAY: none
}
#cntR {
WIDTH: 302px
}
#NewsTop {
CLEAR: both; MARGIN-BOTTOM: 16px
}
#NewsTop P {
FLOAT: left; LINE-HEIGHT: 21px
}
#NewsTop P.topTit {
FONT-WEIGHT: bold; WIDTH: 117px
}
#NewsTop P.topC0 {
BACKGROUND: #dcdcdc; BORDER-LEFT: #f2f2f2 1px solid; WIDTH: 40px; CURSOR: pointer
}
#NewsTop P.topC1 {
BACKGROUND: #c2130e; BORDER-LEFT: #f2f2f2 1px solid; WIDTH: 40px; COLOR: #fff
}
#NewsTop #NewsTop_tit {
BORDER-BOTTOM: #c2130e 3px solid; HEIGHT: 21px
}
#NewsTop #NewsTop_cnt {
PADDING-LEFT: 32px; BACKGROUND: url(/images/1-10.gif) no-repeat 12px 13px; LINE-HEIGHT: 26px; PADDING-TOP: 7px; HEIGHT: 260px; TEXT-ALIGN: left
}
#NewsTop #NewsTop_cnt A {
COLOR: #666; TEXT-DECORATION: none
}
#NewsTop #NewsTop_cnt A:hover {
COLOR: #c2130e; TEXT-DECORATION: underline
}

/*以下的CSS为带头条的版本，如果你用的是没有头条的，可以删除*/

.first_center {
FLOAT: left; MARGIN: 0px 0px 0px 6px; WIDTH: 300px
}
.first_center_1 {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 2px; WIDTH: 300px; PADDING-TOP: 2px; BACKGROUND-COLOR: #eef7fc
}
.first_center_1 UL {
WIDTH: 300px; LINE-HEIGHT: 200%
}
.first_center_1 LI {
FONT-WEIGHT: bold; FONT-SIZE: 16px; COLOR: #ca0202
}
.first_center_1 LI.small {
FONT-WEIGHT: normal; FONT-SIZE: 12px
}