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

最新推荐文章于 2021-06-25 13:06:03 发布

转载最新推荐文章于 2021-06-25 13:06:03 发布 · 2.9k 阅读

13 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/fanszone/archive/2013/04/03/2997112.html

文章标签：

#数据库

本文介绍如何使用HTML中的iframe与a标签实现页面间的联动效果，通过设置target属性与iframe的name属性匹配，点击链接时能在指定iframe中加载不同内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现原理：使用<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>