iframe的跳转控制问题

index.html代码如下
<!DOCTYPE html>
<html class="no-js">
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>测试iframe</title>
<link href="css/responsive-menu.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet"><script src="js/modernizr.min.js" type="text/javascript"></script>
<script src="js/modernizr-custom.js" type="text/javascript"></script>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/responsive-menu.js" type="text/javascript"></script>
<script>
jQuery(function ($) {
var menu = $('.rm-nav').rMenu({
minWidth: '960px',
});
});
</script></head>
<body>
<header>
<div class="wrapper">
<div class="brand">
<p><a href="#" class="logo">logo</a></p>
</div><div class="rm-container">
<a class="rm-toggle rm-button rm-nojs" href="#">导航菜单</a> <nav class="rm-nav rm-nojs rm-lighten">
       <ul>

<li><a href="#">用户中心</a>
<ul>
<li><a href="#">个人信息</a></li>
<li><a href="#">密码修改</a></li>
                    <li><a href="#">问题反馈</a></li>
                    <li><a href="#">操作日志</a></li>
</ul></li>
</ul>

</nav>
</div>
</div>
</header>
<iframe id="myifr" src="index2.html" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
<script>$(function() { $('pre').addClass('prettyprint');})</script>
</html>在此文件件的根目录下还有changpassword.html和feedback.html,我想点"密码修改"时,iframe中的内容跳转到changpassword.html,点击"问题反馈"时iframe中的内容跳转到feedback.html,请问这个JS该怎么写,写在index.htmal的什么位置?