子页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TEMPLATE</title>
<script src="https://lib.baomitu.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://lib.baomitu.com/template_js/0.7.1/template.min.js"></script>
<style>
.nav-list1 li a span{
color:#000;
}
.nav-list1 li{
list-style-type: none;
float:left;
width: 145px;
height:30px;
line-height: 30px;
color:#000;
}
.nav-list1 li.active a span{
color:#ff0000;
}
</style>
</head>
<body>
<h1>送过来科技</h1>
<div id="content"></div>
<script id="javascript_template" type="text/template">
<div class="header">
<div class="nav">
<a href="index.do" class="nav-btn"></a>
<ul class="nav-list1">
<li><a href="javascript:" onclick="goHref('1.html')"><span>服务器</span></a></li>
<li><a href="javascript:" onclick="goHref('2.html')"><span>网络设备</span></a></li>
<li><a href="javascript:" onclick="goHref('3.html')"><span>存储设备</span></a></li>
<li><a href="javascript:" onclick="goHref('4.html')"><span>虚拟机</span></a></li>
<li><a href="javascript:" onclick="goHref('5.html')"><span>软件</span></a></li>
</ul>
</div>
</div>
</script>
<script>
var _html=document.getElementById('javascript_template').innerHTML;
document.getElementById('content').innerHTML = _html;
</script>
</body>
<script src="https://lib.baomitu.com/jquery/1.12.4/jquery.min.js"></script>
<script>
function childFunction(id) {
$('.nav-list1 li').eq(id).addClass('active').siblings().removeClass('active');
}
function goHref(href){
window.parent.parentChild(href);
}
</script>
</html>
父页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.test{
background: #bbb;
}
</style>
</head>
<body>
<p>测试数据</p>
<p>测试数据</p>
<p>测试数据</p>
<p>测试数据</p>
<p>测试数据</p>
<div class="test">
<iframe src="template.html" width="100%" frameborder="0" scrolling="no" id="navtest" name="child"></iframe>
</div>
<input type="button" name="call child" value="call child" id="btn" onclick="callChild(3)"/>
</body>
<script src="https://lib.baomitu.com/jquery/1.12.4/jquery.min.js"></script>
<script>
function callChild(d) {
child.window.childFunction(d);
}
function parentChild(a){
location.href = a;
}
$(function(){
$("#navtest").load(function(){
$(this).contents().find(".nav-list1 li").eq(2).css('background','red');
});
})
</script>
</html>