当前位置：首页 > 资讯 > 技术文档

js tab效果代码增强版

时间：2021-08-11 11:59 编辑：来源：阅读：
扫一扫，手机访问

摘要：js tab效果代码增强版

<table border="0" cellpadding="0" cellspacing="0" width="600"> 
<tr> 
    <td><table border="0" cellpadding="0" cellspacing="0" class="TabBarLevel1" id="TabPage1" width="100%"> 
      <tr align="center"> 
        <td class="mousehand" id="imageTab1" onclick="javascript:switchTab('TabPage1','imageTab1','心开风神','image');" valign="middle" width="130">热门图片</td> 
        <td class="Black" width="7"> </td> 
        <td class="mousehand" id="imageTab2" onclick="javascript:switchTab('TabPage1','imageTab2','子虚乌有','image');" valign="middle" width="80">波希米亚</td> 
        <td class="Black" width="7"> </td> 
        <td class="Selected mousehand" id="imageTab3" onclick="javascript:switchTab('TabPage1','imageTab3','孤零飘客','image');" valign="middle" width="80">红色黑客</td> 
        <td class="Black" width="7"> </td> 
        <td align="right" class="Black" width="">[url=http://www.1sucai.cn]编程素材网[/url]  </td> 
      </tr> 
    </table> 
      <table border="0" cellpadding="0" cellspacing="0" class="Content" width="100%"> 
        <tr> 
          <td height="110"><div id="divimagelist_all"> 正在加载...</div></td> 
        </tr> 
      </table></td> 
</tr> 
</table>

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

本人在它的基础上添加的内容控制的效果

[u]复制代码[/u] 代码如下:

<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>

全部评论(0)

上一篇：bootstrap modal+gridview实现弹出框效果
下一篇：javascript网页关闭时提醒效果脚本

资讯排行榜
更多>>