js tab效果代码增强版

</p> <p>body {<br /> font-family: Arial,"宋体";<br /> font-size:9pt;<br /> }<br /> td { font-size:12px;;<br /> }<br /> .mousehand{<br /> cursor:hand;<br /> }<br /> .title<a href="https://www.kunjuke.com/tag/2275/" title="tab" target="_blank">tab</a>le{<br /> padding-left:5px;<br /> background-color:#E9E9E9; }<br /> table.TabBarLevel1{<br /> } </p> <p>table.TabBarLevel1 td{<br /> border:1px solid #CCCCCC;<br /> height:20px;<br /> background-color:#E1E1E1;<br /> }<br /> table.TabBarLevel1 td.Selected{<br /> border-bottom-width:0px;<br /> background-color:#ffffff;<br /> }<br /> table.TabBarLevel1 td.Black{<br /> border-left-width:0px;<br /> border-top-width:0px;<br /> border-right-width:0px;<br /> background-color:#FFFFFF;<br /> }<br /> table.Content{<br /> border-left:1px solid #CCCCCC;<br /> border-right:1px solid #CCCCCC;<br /> border-bottom:1px solid #CCCCCC;<br /> } </p> <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">热门图片</td> <td width="7" class="Black"> </td> <td width="80" id="imageTab2" valign="middle" class="mousehand">波希米亚</td> <td width="7" class="Black"> </td> <td width="80" id="imageTab3" valign="middle" class="Selected mousehand">红色黑客</td> <td width="7" class="Black"> </td> <td width="" align="right" class="Black">北冥有鱼  </td> </tr> </table> <table width="100%" border="0" cellpadding="0" cellspacing="0" class="Content"> <tr> <td height="110"> 正在加载...</td> </tr> </table> </td> </tr> </table> <p>
[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>

您可能感兴趣的文章:

• javascript写的一个表单动态输入提示的代码
• Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
• js tab效果的实现代码
• Jquery 实现Tab效果 思路是js思路
• jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换