美文网首页
解决ie8以下 通过ClassName()获取类名的兼容问题

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

作者: JSONYUAN | 来源:发表于2019-10-22 10:19 被阅读0次

众所周知: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>

相关文章

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

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

  • spring 探索(一)

    解析获取xml 通过解析的xml获取className 通过className获取bean 实现上述测试类需要De...

  • Day06(三目运算,数组添加和删除,demo 旋转风车)

    className 类名 添加类名:元素.className=’main’;移出类名:元素.className=’...

  • ie8 兼容设置className

    最近在写项目,发现在ie8下,用className去设置类名,是不可以实现的。 用setAttribute方法才可以

  • ie8兼容问题

    ie8中遇到的兼容问题以及解决方案 一.CSS3 1.可以通过在css中引入pie.htc,处理兼容问题(可处理的...

  • react 样式处理

    jsx内联样式 - 用className来绑定类名 语法: className="类名 类名2" or class...

  • div+css 解决ie6,7,8,FF兼容

    div+css 解决IE 6,7,8 FF兼容问题 IE8下兼容问题,加如下代码就实现从IE7到IE8的兼容 fl...

  • 2016-12-7

    解决兼容问题: IE8及以下不支持rgba属性,解决办法: 详解:#7f000000,第一部分是#号后面的7f。是...

  • iOS 获取工程内控制器名称

    OC 获取Xcode内所有的控制器类名方法 附:class与string之间的互相转换 通过类名获取类 通过类获取...

  • Appium常用api

    (1)获取当前页面的类名->可拿来做断言 1.通过adb 命令获取类名 2.通过api获取类名 (2)获取当前页面...

网友评论

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

      本文链接:https://www.haomeiwen.com/subject/qkofvctx.html