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

}

}