本身JS是弱项,慢慢增加这方面的知识量,遇到自己写的JS就往这里面存一下吧!
遇到这样一个场景:一排按钮,点击其中一个按钮需要把当前按钮标明出来,但是之前的按钮这个样式的又要清除掉。于是就用到了啦!
另外将网页子页面装载到iframe里面去,不能用href直接连接(打开新页了),因此用JS处理将子页直接装载在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
}
}