html静态实现左边导航右边显示链接页面

实现原理：使用<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="width: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>

效果如下：

posted @ 2013-04-03 00:25  FansZone  阅读(4680)  评论(0)  编辑  收藏  举报