实现原理：使用<a>标签链接时应设置target属性，指定与iframe的name属性名称相同。
例如：<a href="firstKind.html" target="right">产品I级分类设置</a>
<iframe src="blank.html" name="right" width="1000" height="1000"></iframe> //blank.html为iframe默认打开的页面
DEMO： index.html
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <div style="300px; float:left;"> 6 <ul> 7 <li>客户化设置</li> 8 <ul> 9 <li>产品档案管理设置</li> 10 <ul> 11 <li><a href="firstKind.html" target="right">产品I级分类设置</a></li> 12 <li><a href="secondKind.html" target="right">产品II级分类设置</a></li> 13 <li><a href="thirdKind.html" target="right">产品III级分类设置</a></li> 14 <li><a href="fieldType.html" target="right">产品用途类型设置</a></li> 15 <li><a href="strategyClass.html" target="right">产品档次级别设置</a></li> 16 <li><a href="responsiblePersonName.html" target="right">产品经理设置</a></li> 17 </ul> 18 <li>产品价格调整管理</li> 19 <ul> 20 <li><a href="priceAlarm.html" target="right">成本单价报警设置</a></li> 21 </ul> 22 <li>其他设置</li> 23 <ul> 24 <li><a href="key.html" target="right">关键字查询设置</a></li> 25 <li><a href="costCalculate_locate.html" target="right">产品成本核算方式</a></li> 26 </ul> 27 </ul> 28 </ul> 29 </div> 30 31 <iframe src="blank.html" name="right" width="1000" height="1000"></iframe> 32 33 </body> 34 </html>
效果如下：
