JS对父元素和子元素样式设置及Iframe子页面装载

本身JS是弱项，慢慢增加这方面的知识量，遇到自己写的JS就往这里面存一下吧！

遇到这样一个场景：一排按钮，点击其中一个按钮需要把当前按钮标明出来，但是之前的按钮这个样式的又要清除掉。于是就用到了啦！

另外将网页子页面装载到iframe里面去，不能用href直接连接（打开新页了），因此用ＪＳ处理将子页直接装载在iframe里面，这里用_href代替啦

下面是HTML代码：

<nav class="nav navbar-nav nav-collapse" role="navigation" id="Hui-navbar">
<ul class="cl">
<li class="current"><a href="/">首页</a></li>
<li><a _href="/LLTReport/" href="javascript:void(0)">核心</a></li>
<li><a href="#">扩展</a></li>
</ul>
</nav>

//Iframe

 <div id="iframe_box" class="Hui-article">
            <div class="show_iframe">
                <div style="display: none" class="loading"></div>
                <iframe scrolling="yes" frameborder="0" src="/LLTReport/"></iframe>
            </div>
        </div>

//找到对应的ID控件，找下面的CL元素，下面的A元素的点击响应函数。

$("#Hui-navbar").on("click", ".cl a", function () {
Hui_admin_tab(this);
});

然后下面就是干活的了啦！

function Hui_admin_tab(obj){
if($(obj).attr('_href')){
var bStop=false;
var bStopIndex=0;
var _href = $(obj).attr('_href');
_href += "?" + index++;
var topWindow=$(window.parent.document);
var childs = obj.parentNode.parentNode.childNodes;//获得爷爷辈的节点
for (var i = childs.length - 1; i >= 0; i--) {//清除所有父节点级所有样式
   childs[i].className = "";
}
obj.parentNode.className="current";//把自己爹样式设置上
var iframe_box=topWindow.find("#iframe_box");//获取Iframe
iframe_box.find(".show_iframe").hide().eq(bStopIndex).show().find("iframe").attr("src",_href);//将连接的网页装载到Iframe 
}
}