vicwity's blog

这段脚本的诞生，要隆重的感谢XB同志一下，他太天才了，赞一个先。

function findA(obj)
{
         TagA=obj.getElementsByTagName("a");
         if (TagA.length>0)
         return TagA[0];
}

function findContentDIV(obj)
{
        TagDiv=obj.childNodes;
        var arrDiv = new Array;
        for(i=0;i<TagDiv.length;i++)
        {
                var objDiv = TagDiv[i];
                var re = /div/i;
                var arr = re.exec(objDiv.tagName);
                if(arr != null)
                {
                        if(arr.index == 0)
                        {
                                arrDiv.push(objDiv);
                       }
                }    
        }
        return arrDiv;
}

function chShift(o)
{
        o.style.cursor="pointer";
        var t=o.parentNode;
        var tA=t.getElementsByTagName("a");   
        var tParent=t.parentNode;
        var tParentDIV=findContentDIV(tParent);
 
        for(i=0;i<tA.length;i++)
        { 
                tA[i].className= null;   
                tParentDIV[i].style.display="none";
                if(tA[i]==findA(o))
                {
                        tA[i].className="on";
                        tParentDIV[i].style.display="block";
                }
        }
}

用法说明：

这段智能脚本对页面中的HTML层级结构要求比较严格。必须遵从下列层次关系：

<div>
        <ul>
                 <li onmouseover="javascript:chShift(this)">
                           <a class="on">Tab标题一</a>
                 </li>
                 <li onmouseover="javascript:chShift(this)">
                           <a>Tab标题二</a>
                 </li>
                 ……
                 <li onmouseover="javascript:chShift(this)">
                            <a>Tab标题n</a>
                 </li>
        </ul>
        <div>Tab标题一对应的内容</div>
        <div>Tab标题二对应的内容</div>
        ……
        <div>Tab标题二对应的内容</div>
</div>

如果HTML的层级发生了变化，代码重要做出相应的修改。

部分CSS：

ul
{
 margin:0;
 padding:0;
 list-style-type:none;
 height:24px;
}
ul li
{
 float:left;
 display:inline;
}
ul a
{
 text-decoration: none;
 border-top:1px solid #ddd;
 border-bottom:1px solid #ccc;  
 border-left:1px solid #ddd;
 border-right:1px solid #ddd;
 display: block;
 padding: 5px 0 3px;
 margin-left:-1px;
 width:258px;
 font-weight: bold;
 text-align:center;
 line-height:15px;
 color: #11449E;
}

a.on,a:hover
{ 
 padding-top: 6px;
 padding-bottom:3px;
 width:259px;
 border: 1px solid #ccc;
 border-bottom: 0;
 background:#DEEBFF;
}

优点：无须设置任何参数，无序设置任何ID，使用方便。

缺点：对HTML代码的层级要求严格。

该脚本在ie6、ff1.5下测试通过。

开心一下，有了这段脚本不用再担心bt的页面了，即使有几十组的tab切换也不用烦心的去设置参数了。

参考页面：http://gongcheng.studyez.com/