Heim > Artikel > Web-Frontend > js tab效果代码增强版_javascript技巧

js tab效果代码增强版_javascript技巧

WBOYOriginal: 2016-05-16 19:05:02913Durchsuche

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="http://www.jb51.net">脚本之家</a>  </td> 
      </tr> 
    </table> 
      <table width="100%" border="0" cellpadding="0" cellspacing="0" class="Content"> 
        <tr> 
          <td height="110"><div id="divimagelist_all"> 正在加载...</div></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> <BR>function $(objName) <BR>{ <br><br>    if(document.getElementById) <BR>    { <BR>        return document.getElementById(objName ); <BR>    } <BR>    else if(document.layers) <BR>    { <BR>        return eval("document.layers['" + objName +"']"); <BR>    } <BR>    else <BR>    { <BR>        return eval('document.all.' + objName); <BR>    } <BR>} <BR>function switchTab(tabpage,tabid,action,type){ <BR>    var oItem = $(tabpage);    <BR>    for(var i=1;i<6;i++){ <BR>        var x = $(type + 'Tab' + i);     <BR>        //alert(x); <BR>        x.className = "mousehand"; <BR>        //var y = x.getElementsByTagName('a'); <BR>        //y[0].style.color="#333333"; <BR>  }     <BR>    $(tabid).className = "Selected"; <BR>    //gethotimagelist(type+'_'+action); <BR>    closeall(action); <BR>    $(action).style.display="block"; <BR>} <BR>function closeall(action){ <BR>for(var ii=1; ii<5; ii++){ <BR>var noclose; <BR>noclose="div"+ii; <BR>if (noclose!=action){ <BR>$(noclose).style.display="none"; <BR>} <BR>} <BR>} <BR></script>

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：js放大镜放大图片效果_图象特效Nächster Artikel：js调用flash的效果代码_javascript技巧

In Verbindung stehende Artikel

Mehr sehen