TAB

最新推荐文章于 2024-08-01 14:15:36 发布

xieguang133

最新推荐文章于 2024-08-01 14:15:36 发布

阅读量236

点赞数 1

文章标签： class div function menu url ini

本文链接：https://blog.csdn.net/xieguang133/article/details/5189070

版权

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body
{
text-align:center;
}
.tab
{
width:432px;
height:208px;
margin:0 auto;
overflow:hidden;
border:1px solid #cccccc;
}
.menu,.menu li
{
margin:0;
padding:0;
height:24px;
list-style:none;
overflow:hidden;
text-align:center;
}
.menu
{
border-bottom:1px solid #cccccc;
}
.menu .default
{
width:84px;
float:left;
font-size:10pt;
line-height:1.5;
margin-left:1px;
cursor:pointer;
background:url('/Upload/200811223634251.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('/Upload/200811223634486.jpg') no-repeat;
}
.menu .showme,.menu .hidme{
width:76px;
float:left;
font-size:14pt;
line-height:1.5;
margin-left:1px;
cursor:pointer;
color:#0000FF;
text-align:right;
font-weight:bold
}
.con
{
width:422px;
height:0px;
margin:0 auto;
}
.tab0{
height:208
}
</style>
<head>
<body>
<script>
var show_n
var H=200,h_m=24
var n=20,t=50;
function init(ids,cons,dis,tbs,show_me){
document.getElementById(ids).οnmοuseοver=function(){onmousOver(ids,cons,dis,tbs);}
document.getElementById(ids).οnclick=function(){show_con(ids,cons,dis,tbs);}
if (show_me!=0){show_n=tbs;
    document.getElementById(ids).getElementsByTagName('li')[0].className='active';
   document.getElementById(cons).innerHTML=document.getElementById(dis+"l1").innerHTML;
   document.getElementById(tbs).style.height=H
}
else{
   document.getElementById(cons).innerHTML=document.getElementById(dis+"l1").innerHTML;
   document.getElementById(tbs).style.height=h_m;
}
}
function onmousOver(ids,cons,dis,tbs){
o = o || window.event;
var obj=o.target || o.srcElement;
if (obj.tagName=='LI'){
if (obj.className=='active')return;
var o=document.getElementById(ids).getElementsByTagName('li');
for (var i=0;i<=o.length-1;i++){o[i].className='default'}
obj.className='active';
if (show_n==tbs){document.getElementById(cons).innerHTML=document.getElementById(dis+obj.id).innerHTML;}
obj.οnmοuseοut=function(){if (show_n!=tbs)this.className='default';}
}
}
function show_con(ids,cons,dis,tbs){
var obj_show_tab=document.getElementById(tbs)
var obj_hid_tab=document.getElementById(show_n)
if (show_n!=tbs){
var o=document.getElementById(show_n).childNodes[0].getElementsByTagName('li')
for (var i=0;i<=o.length-1;i++){o[i].className='default'}
show_n=tbs;
var obj=event.srcElement;
document.getElementById(cons).innerHTML=document.getElementById(dis+obj.id).innerHTML;
var timers=new Array(n);

for(var i=0;i<n;i++){(
function(){
      if(timers[i]) clearTimeout(timers[i]);
      var j=i;
      timers[i]=setTimeout(function(){obj_hid_tab.style.height=H-Math.round((H-h_m)*(j+1)/n);
              obj_show_tab.style.height=h_m+Math.round((H-h_m)*(j+1)/n);},(i+1)*t);
      }
     )()};
}
}
</script>
<div class="tab0">

<div id='tab1' class='tab'>
<ul id='nav1' class='menu'>
   <li id="l1" class='default'>第一新闻</li>
   <li id="l2" class='default'>第二新闻</li>
   <li id="l3" class='default'>第三新闻</li>
</ul>
<div class='con' id='con1'>
</div>
</div>
<div style="display:none">
<div id="div1_l1">
<span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
</div>
<div id="div1_l2">
<span>所以特来问一下高手们，请大家帮帮忙！</span>
</div>
<div id="div1_l3">
<span>找了几个来改，都是头部的菜单那里太难定位了</span>
</div>
</div>
<script>
init('nav1','con1',"div1_",'tab1',1);
</script>

<div id='tab2' class='tab'>
<ul id='nav2' class='menu'>
   <li id="l1" class='default'>第一新闻</li>
   <li id="l2" class='default'>第二新闻</li>
   <li id="l3" class='default'>第三新闻</li>
   <li id="l4" class='default'>第四新闻</li>
   <li id="l5" class="default">第5新闻</li>
</ul>
<div class='con' id='con2'>
</div>
</div>
<div style="display:none">
<div id="div2_l1">
<span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
</div>
<div id="div2_l2">
<span>所以特来问一下高手们，请大家帮帮忙！</span>
</div>
<div id="div2_l3">
<span>找了几个来改，都是头部的菜单那里太难定位了</span>
</div>
<div id="div2_l4">
<span>当鼠标放上去时就变，而不用点了！</span>
</div>
<div id="div2_l5">
<span>增加了！</span>
</div>
</div>
<script>
init('nav2','con2',"div2_",'tab2',0);
</script>

<div id='tab3' class='tab'>
<ul id='nav3' class='menu'>
   <li id="l1" class='default'>第一新闻</li>
   <li id="l2" class='default'>第二新闻</li>
   <li id="l3" class='default'>第三新闻</li>
   <li id="l4" class='default'>第四新闻</li>
</ul>
<div class='con' id='con3'>
</div>
</div>
<div style="display:none">
<div id="div3_l1">
<span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
</div>
<div id="div3_l2">
<span>所以特来问一下高手们，请大家帮帮忙！</span>
</div>
<div id="div3_l3">
<span>找了几个来改，都是头部的菜单那里太难定位了</span>
</div>
<div id="div3_l4">
<span>当鼠标放上去时就变，而不用点了！</span>
</div>
</div>
</div>
<script>
init('nav3','con3',"div3_",'tab3',0);
</script>
<script>
//show_con(show_n)
</script>
</body>
</html>