网站首页 | 站长论坛 | 免费空间申请 | 站长下载 | 站长博客 | 商业主机 | 免费空间推荐站点 | 免费空间排行榜 | 我们知道
发新话题
打印

[其它设计] [09-15] 发一些常用的JS代码,希望大家接着更新

[09-15] 发一些常用的JS代码,希望大家接着更新

样式:
.undis{display:none;}
.dis{display:block;}
.ontac {text-decoration: none; font:bold 12px/34px "宋体";color: #FF6600;display:block;text-align: center;background: url(images/ex1_06.gif) center no-repeat; height:37px;}


JS部分:
<script type="text/javascript" language="javascript">
<!--
function g(o){return document.getElementById(o);}
function HoverLi(n)
{
for(var i=1;i<=6;i++){g('tb_'+i);g('tbc_0'+i).className='undis';}
g('tbc_0'+n).className='dis';g('tb_'+n);
if(n==1){
g('tb_'+1).className='ontac';
g('tb_'+2).className="";
g('tb_'+3).className="";
g('tb_'+4).className="";
g('tb_'+5).className="";
g('tb_'+6).className="";
}
if(n==2){
g('tb_'+1).className="";
g('tb_'+2).className='ontac';
g('tb_'+3).className="";
g('tb_'+4).className="";
g('tb_'+5).className="";
g('tb_'+6).className="";
}
if(n==3){
g('tb_'+1).className="";
g('tb_'+2).className="";
g('tb_'+3).className='ontac';
g('tb_'+4).className="";
g('tb_'+5).className="";
g('tb_'+6).className="";
}
if(n==4){
g('tb_'+1).className="";
g('tb_'+2).className="";
g('tb_'+3).className="";
g('tb_'+4).className='ontac';
g('tb_'+5).className="";
g('tb_'+6).className="";
}
if(n==5){
g('tb_'+1).className="";
g('tb_'+2).className="";
g('tb_'+3).className="";
g('tb_'+4).className="";
g('tb_'+5).className='ontac';
g('tb_'+6).className="";
}
if(n==6){
g('tb_'+1).className="";
g('tb_'+2).className="";
g('tb_'+3).className="";
g('tb_'+4).className="";
g('tb_'+5).className="";
g('tb_'+6).className='ontac';
}
}
//-->
</script>


页面部分:

导航:
       <div id="tb_1"  align="center" class="ontac">基本信息</div>
        <div id="tb_2"  align="center">学历信息</div>
        <div id="tb_3"  align="center">技能信息</div>
        <div id="tb_4"  align="center">履历信息</div>
        <div id="tb_5"  align="center">合同信息</div>
        <div id="tb_6"  align="center">档案信息</div>
        

具体内容:
<div class="dis" id="tbc_01">111<div>
<div class="undis" id="tbc_02">222<div>
<div class="undis" id="tbc_03">333<div>
<div class="undis" id="tbc_04">444<div>
<div class="undis" id="tbc_05">555<div>
<div class="undis" id="tbc_06">666<div>


说明:我只是把主要的地方抠出来了,自己写的,有些粗糙,希望大家不要见笑,
详细的见附件
其中“onmouseover”可以改为“onmouseclick”

大家有收藏的常用JS也都发来分享哈~~~~~
共同进步才是真的进步

[ 本帖最后由 yuherobin 于 2008-9-15 15:19 编辑 ]
附件: 您所在的用户组无法下载或查看附件

TOP

发给我也看不懂,但还是收藏了!
冰火缘群友会,英雄难过美人关
邵阳地区最火爆、最真实、最HI的聚会聊天场所……

TOP

发点效果图啊

TOP

你这都是什么相关的代码啊???

TOP

DIV 效果的?

TOP

没效果图 啊.?
很难看明白啦  

TOP

不好意思,我不是很懂呢~能不能发个效果图
男孩女孩看过来~这里的节目最精彩

TOP

发的代码和附件里的不一样啊。
主要两个效果:拖曳效果和选项卡效果。

附件里结构是纯table的,不是很合理啊。至于LZ的div写的也不是很合理啊。

TOP

一看就是拷贝别人的

TOP

发新话题