js tab效果代码增强版

ttx9n · 发表于 2008-4-20 16:01:36

兼容IE,firefox的js tab效果代码增强版

table.TabBarLevel1 td{ 
border:1px solid #CCCCCC; 
height:20px; 
background-color:#E1E1E1; 
} 
table.TabBarLevel1 td.Selected{ 
border-bottom-width:0px; 
background-color:#ffffff; 
} 
table.TabBarLevel1 td.Black{ 
border-left-width:0px; 
border-top-width:0px; 
border-right-width:0px; 
background-color:#FFFFFF; 
} 
table.Content{ 
border-left:1px solid #CCCCCC; 
border-right:1px solid #CCCCCC; 
border-bottom:1px solid #CCCCCC; 
} 
</style> 
<table width="600" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
    <td><table width="100%" border="0" cellspacing="0" cellpadding="0" class="TabBarLevel1" id="TabPage1"> 
      <tr align="center"> 
        <td width="130" id="imageTab1" valign="middle" class="mousehand" onclick="javascript:switchTab('TabPage1','imageTab1','心开风神','image');">热门图片</td> 
        <td width="7" class="Black"> </td> 
        <td width="80" id="imageTab2" valign="middle" class="mousehand" onclick="javascript:switchTab('TabPage1','imageTab2','子虚乌有','image');">波希米亚</td> 
        <td width="7" class="Black"> </td> 
        <td width="80" id="imageTab3" valign="middle" class="Selected mousehand" onclick="javascript:switchTab('TabPage1','imageTab3','孤零飘客','image');">红色黑客</td> 
        <td width="7" class="Black"> </td> 
        <td width="" align="right" class="Black"><a href="https://www.jb51.net/www.jb51.net">脚本之家</a>  </td> 
      </tr> 
    </table> 
      <table width="100%" border="0" cellpadding="0" cellspacing="0" class="Content"> 
        <tr> 
          <td height="110"> 正在加载...</td> 
        </tr> 
      </table></td> 
</tr> 
</table> 
<script language="javascript"> 
function switchTab(tabpage,tabid,action,type){ 
    var oItem = document.getElementById(tabpage);    
    for(var i=1;i< 4;i++){ 
        var x = document.getElementById(type + 'Tab' + i);     
        //alert(x); 
        x.className = "mousehand"; 
        //var y = x.getElementsByTagName('a'); 
        //y[0].style.color="#333333"; 
    }     
    document.getElementById(tabid).className = "Selected"; 
    //gethotimagelist(type+'_'+action); 
    divimagelist_all.innerHTML = type+'_'+action; 
} 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
本人在它的基础上添加的内容控制的效果
复制代码代码如下:
<script type="text/javascript">
function $(objName)
{

    if(document.getElementById)
    {
        return document.getElementById(objName );
    }
    else if(document.layers)
    {
        return eval("document.layers['" + objName +"']");
    }
    else
    {
        return eval('document.all.' + objName);
    }
}
function switchTab(tabpage,tabid,action,type){
    var oItem = $(tabpage);
    for(var i=1;i<6;i++){
        var x = $(type + 'Tab' + i);
        //alert(x);
        x.className = "mousehand";
        //var y = x.getElementsByTagName('a');
        //y[0].style.color="#333333";
  }
    $(tabid).className = "Selected";
    //gethotimagelist(type+'_'+action);
    closeall(action);
    $(action).style.display="block";
}
function closeall(action){
for(var ii=1; ii<5; ii++){
var noclose;
noclose="div"+ii;
if (noclose!=action){
$(noclose).style.display="none";
}
}
}
</script>

0608fv3 · 发表于 2023-10-15 23:46:35

谢谢小Y分享

3t0ukmu · 发表于 2023-11-25 02:58:13

哦哦哦ijhhsdj

8ayoqrpj · 发表于 2024-4-15 17:52:32

66666666666666666666

uj9lpc · 发表于 2024-7-3 08:13:15

看到这帖子真是高兴！

vir5051 · 发表于 2024-7-27 21:22:43

笑纳了老板

qq303604905 · 发表于 2024-8-7 08:37:18

感谢楼主分享

4k0mp7m · 发表于 2024-8-17 23:21:14

好东西一定要看看！

JosephSA · 发表于 2024-9-11 02:28:11

哈哈哈哈哈哈哈

账号		自动登录	找回密码
密码			立即注册

[JavaScript] js tab效果代码增强版

相关帖子