选项卡-多点调用-特效
<html>
<head>
<style>
body
{
text-align:center;
}
.tab
{
width:422px;
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('http://bbs.blueidea.com/attachments/2007/8/18/20070818_241a80ab0dd53bfc243c4HJ5loaUhWq0.jpg')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('http://bbs.blueidea.com/attachments/2007/8/18/20070818_b835de2308bfcb1e1b9er1lVW1TwG6NA.jpg')no-repeat;
}
.menu.showme,.menu.hidme{
width:76px;
float:left;
font-size:14pt;
line-height:1.5;
margin-left:1px;
cursor:pointer;
background:url('bg.gif');
color:#0000FF;
text-align:right;
font-weight:bold;
}
.con
{
width:422px;
height:184px;
margin:0auto;
}
</style>
<head>
<body>
<script>
vartb_h=newArray()
functioninit(ids,cons,dis,hids,tbs){
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,hids);}//鼠标指向激发效果
//document.getElementById(ids).onclick=function(){onmousOver(ids,cons,dis,hids);}//点击激发效果
varobj_tab=document.getElementById(tbs)
tb_h[tbs]=obj_tab.offsetHeight;
}
functiononmousOver(ids,cons,dis,hids){
o=o||window.event;
varobj=o.target||o.srcElement;
if(obj.tagName=='LI'){
if(obj.className=='active'||obj.id==hids)return;
varo=document.getElementById(ids).getElementsByTagName('li');
for(vari=0;i<=o.length-2;i++){o[i].className='default'}
obj.className='active';
if(obj.className=='active'){document.getElementById(cons).innerHTML=document.getElementById(dis+obj.id).innerHTML;}
}
}
functionshow_con(tbs,ids,hids){
varobj_click=document.getElementById(hids);
obj_click.innerHTML=(obj_click.innerHTML=="+")?"-":"+"
obj_click.className=(obj_click.className=='showme')?'hidme':'showme'
varhid=(obj_click.className=='showme')?1:-1
varobj_tab=document.getElementById(tbs)
varobj_nav=document.getElementById(ids)
varh_m=obj_nav.offsetHeight+2
varH=tb_h[tbs]
varn=20,t=50;
vartimers=newArray(n);
if(hid<0){
for(vari=0;i<n;i++){(
function(){
if(timers[i])clearTimeout(timers[i]);
varj=i;
timers[i]=setTimeout(function(){obj_tab.style.height=H-Math.round((H-h_m)*(j+1)/n);},(i+1)*t);
}
)()};
}
if(hid>0){
for(vari=0;i<n;i++){(
function(){
if(timers[i])clearTimeout(timers[i]);
varj=i;
timers[i]=setTimeout(function(){obj_tab.style.height=h_m+Math.round(H*(j+1)/n);},(i+1)*t);
}
)()};
}
}
</script>
<!--#1-->
<divid='tab1'class='tab'>
<ulid='nav1'class='menu'>
<liid="l1"class='default'>第一新闻</li>
<liid="l2"class='default'>第二新闻</li>
<liid="l3"class='default'>第三新闻</li>
<liid="hid1"class="showme"style="width:160px"onclick="show_con('tab1','nav1','hid1')">-</li>
</ul>
<divclass='con'id='con1'>
</div>
</div>
<divstyle="display:none">
<divid="div1_l1">
<span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
</div>
<divid="div1_l2">
<span>所以特来问一下高手们，请大家帮帮忙！</span>
</div>
<divid="div1_l3">
<span>找了几个来改，都是头部的菜单那里太难定位了</span>
</div>
</div>
<script>
init('nav1','con1',"div1_","hid1",'tab1');
</script>
<!--#2-->
<divid='tab2'class='tab'>
<ulid='nav2'class='menu'>
<liid="l1"class='default'>第一新闻</li>
<liid="l2"class='default'>第二新闻</li>
<liid="l3"class='default'>第三新闻</li>
<liid="l4"class='default'>第四新闻</li>
<liid="hid2"class="showme"onclick="show_con('tab2','nav2','hid2')">-</li>
</ul>
<divclass='con'id='con2'>
</div>
</div>
<divstyle="display:none">
<divid="div2_l1">
<span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
</div>
<divid="div2_l2">
<span>所以特来问一下高手们，请大家帮帮忙！</span>
</div>
<divid="div2_l3">
<span>找了几个来改，都是头部的菜单那里太难定位了</span>
</div>
<divid="div2_l4">
<span>当鼠标放上去时就变，而不用点了！</span>
</div>
</div>
<script>
init('nav2','con2',"div2_","hid2",'tab2');
</script>
<!--#3-->
<divid='tab3'class='tab'>
<ulid='nav3'class='menu'>
<liid="l1"class='default'>第一新闻</li>
<liid="l2"class='default'>第二新闻</li>
<liid="l3"class='default'>第三新闻</li>
<liid="l4"class='default'>第四新闻</li>
<liid="hid3"class="showme"onclick="show_con('tab3','nav3','hid3')">-</li>
</ul>
<divclass='con'id='con3'>
</div>
</div>
<divstyle="display:none">
<divid="div3_l1">
<span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
</div>
<divid="div3_l2">
<span>所以特来问一下高手们，请大家帮帮忙！</span>
</div>
<divid="div3_l3">
<span>找了几个来改，都是头部的菜单那里太难定位了</span>
</div>
<divid="div3_l4">
<span>当鼠标放上去时就变，而不用点了！</span>
</div>
</div>
<script>
init('nav3','con3',"div3_","hid3",'tab3');
</script>
</body>
</html>