解决ie8以下 通过ClassName()获取类名的兼容问题

众所周知:ie8以下的浏览器是不能通过获取类名的方式来操作元素,所以总结先人经验所得,此为不传之秘法:望各位切勿泄露。

<div class="wrapper">
    <div class="xw-title">新闻与门户访问量统计排行</div>
    <ul class="tab" id="tab">
        <li class="tab-item active"><a href="#" target="_blank">一周新闻</a></li>
        <li class="tab-item"><a href="#" target="_blank">二级单位</a></li>
    </ul>
    <div class="products" id="products">
        <div class="main selected">
            <ul class="ulOne">
                                <iframe id="v1" SCROLLING=no frameborder="0" name='I1' src='' width="240" height="230" align="left"  allowTransparency ></iframe>
            </ul>
                    <a href="/sites/RMC-Huanan/gdmc/pages/mhph-xw.aspx" target="_blank" class="phlink"><img src="../PageAssets/Images/rolla.jpg" ></a>

        </div>
        <div class="main">
        <ul class="ulOne">
                            <iframe id="v2" SCROLLING=no frameborder="0" name='I1' src='http://www.gdxs.petrochina/sites/RMC-Huanan/gdmc/EX_STATICPAGES_/tjph/gsfwph.aspx' width="240" height="230" align="left"  allowTransparency ></iframe>

        </ul>
                            <a href="/sites/RMC-Huanan/gdmc/pages/mhph-fgs.aspx" target="_blank" class="phlink"><img src="../PageAssets/Images/rolla.jpg" ></a>

        </div>
    </div>
</div>
<script>
window.onload=function(){

//解决获取classname获取元素的方式(兼容ie浏览器)
function getElementsByClassName(node,classname){
        if(node.getElementsByClassName){
            return node.getElementsByClassName(classname);
        }
        else{
            var results=new Array();
            var elems=node.getElementsByTagName("*");
            for(var i=0;i<elems.length;i++){
                if(elems[i].className.indexOf(classname)!=-1){
                    results[results.length]=elems[i];
                }
            }
            return results;
        }
    }   
    
    var shopoing=document.getElementById("tab");
    var shopoing1=document.getElementById("products");
  //此为一个转化通过给父类添加一个id,然后来操作子类的组。情况如下:
    var items=getElementsByClassName(shopoing,"tab-item");
    var mains=getElementsByClassName(shopoing1,"main");

// 注册鼠标的移入事件
for (var i = 0; i < items.length; i++) {
    // 3 先把索引先存起来,因为我们要通过索引得到对应的商品
    items[i].index = i;
    items[i].onmouseover = function () {
        // 2.1 把对应的商品显示
        // 先排他的把其余的商品先隐藏
        for (var j = 0; j < mains.length; j++) {
            mains[j].className = 'main';
        }
        // 找到对应的商品显示出来 - 一一对应 - 索引对应 - 先把所以先存储起来
        // 从mains这个伪数组中找到对应的商品
        mains[this.index].className = 'main selected';

        // 2.2 把当前的分类变得和其他人不一样 - 排他
        for (var j = 0; j < items.length; j++) {
            items[j].className = 'tab-item';
        }
        this.className = 'tab-item active';
    }
}
}   
</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。