我有两个iframe，iframe1用于按钮，iframe2将是单击按钮时显示内容的空间。我希望在单击每个按钮时在iframe2中显示不同的内容但是我不能将iframe2中的内容替换为相对于单击按钮的内容（或.html文件）。我已经包含了示例代码。
index.html
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
</head>
<body>
<iframe id="iframe1" src="index2.html" name="iframe1" height="650" width="30%"></iframe>
<iframe id="iframe2" name="iframe1" height="650" width="60%"></iframe>
</body>
</html>
index2.html = iframe1的内容（这包含按钮）
<div class="dropdown clearfix">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown1
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a class="button" src="index2.html" onclick="$('#iframe2')" href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">python</a></li>
<li><a href="#">java</a></li>
</ul>
</div>
</div>
cssc.html =示例内容（当我从下拉菜单中点击CSS时，这应该出现在iframe2中）
下拉菜单元素CSS的示例内容 - 此内容应出现在iframe2中
htmlc.html =当从下拉列表中点击HTML时，此内容应替换iframe2中的任何内容