网页制作中常用的几个简单的选项卡特效代码.docx
- 文档编号:2451947
- 上传时间:2022-10-29
- 格式:DOCX
- 页数:29
- 大小:19.42KB
网页制作中常用的几个简单的选项卡特效代码.docx
《网页制作中常用的几个简单的选项卡特效代码.docx》由会员分享,可在线阅读,更多相关《网页制作中常用的几个简单的选项卡特效代码.docx(29页珍藏版)》请在冰豆网上搜索。
网页制作中常用的几个简单的选项卡特效代码
网页制作中常用的几个简单的选项卡特效代码
更新日期:
2007-09-0521:
32 出处:
网页教学网 作者:
给朋友帮忙,写了几个简单的选项卡,奉献给有需要的朋友
1)多点调用
body
{
text-align:
center;
}
.tab
{
width:
432px;
height:
208px;
margin:
0auto;
overflow:
hidden;
border:
1pxsolid#cccccc;
}
.menu,.menuli
{
margin:
0;
padding:
0;
height:
24px;
list-style:
none;
overflow:
hidden;
text-align:
center;
}
.menu
{
border-bottom:
1pxsolid#cccccc;
}
.menu.default
{
width:
84px;
float:
left;
font-size:
10pt;
line-height:
1.5;
margin-left:
1px;
cursor:
pointer;
background:
url('no-repeat;
}
.menu.active
{
width:
84px;
float:
left;
font-size:
10pt;
line-height:
1.5;
margin-left:
1px;
cursor:
pointer;
font-weight:
bold;
color:
#FFFFFF;
background:
url('no-repeat;
}
#more
{
width:
76px;
float:
left;
font-size:
10pt;
line-height:
1.5;
margin-left:
1px;
cursor:
pointer;
color:
#FF0000;
font-weight:
normal;
text-align:
right
}
.con
{
width:
422px;
height:
184px;
margin:
0auto;
}
functioninit(ids,cons,dis){
document.getElementById(ids).getElementsByTagName('li')[0].className='active';
document.getElementById(cons).innerHTML=document.getElementById(dis+"l1").innerHTML;
//document.getElementById(ids).onmouseover=function(){onmousOver(ids,cons,dis);}//鼠标指向激发效果
document.getElementById(ids).onclick=function(){onmousOver(ids,cons,dis);}//点击激发效果
}
functiononmousOver(ids,cons,dis){
o=o||window.event;
varobj=o.target||o.srcElement;
if(obj.tagName=='LI'){
if(obj.className=='active'||obj.id=='more')return;
varo=document.getElementById(ids).getElementsByTagName('li');
for(vari=0;i<=o.length-1;i++){o[i].className='default'}
obj.className='active';
if(obj.className=='active'){document.getElementById(cons).innerHTML=document.getElementById(dis+obj.id).innerHTML;}
}
}
--#1-->
none"> 要做一个选项卡,在论坛里找了好久都没有理想的效果
所以特来问一下高手们,请大家帮帮忙!
找了几个来改,都是头部的菜单那里太难定位了