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>
效果如下:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步