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