WEB页面简单实现TAB页

最新推荐文章于 2024-05-10 15:07:33 发布

zhangsir199

最新推荐文章于 2024-05-10 15:07:33 发布

阅读量3.1k

点赞数

分类专栏： WEB Design 文章标签： web iframe javascript tabs function float

本文链接：https://blog.csdn.net/zhangsir199/article/details/5606260

版权

WEB Design 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

此效果若用现有的多种JS框架，则轻松实现，但项目需要，还得自己尝试编写：

大致效果：类似浏览器的选项卡的效果。

经过许多失败的设想，最终采用了iframe。

效果图 ：

页面结构 ：

左侧一个导航div

右侧是一个横放的UL，每个LI放一个tab，UL下面用于放置iframe

主要原理 ：

左侧导航的链接调用js，在右侧创建一个新的iframe，并给UL添加一个新的LI，隐藏其他iframe。

细化后 ：

添加新的iframe时，先判断该iframe是否存在（每一个iframe代表一个子系统，page），如果存在则只需将该iframe显示即可

主要代码 ：

<mce:script type="text/javascript"></mce:script> <body> <div style="width: 15%; margin: 10px; float: left; border: 2px solid black;"> <ul style="margin-right: 20px;" mce_style="margin-right: 20px;"> <li><a href="javascript:add('views/usermanage.aspx')" mce_href="javascript:add('views/usermanage.aspx')">用户系统</a></li> <li><a href="javascript:add('views/deptmanage.aspx')" mce_href="javascript:add('views/deptmanage.aspx')">部门系统</a></li> </ul> </div> <div id="displayArea" style="float: left; width: 80%; height: 100%"> <ul id="tabs"> <li class="selectedLi">default</li> </ul> <div id="main" style=""> <iframe src="views/defaultMain.aspx" mce_src="views/defaultMain.aspx" id="f_views/defaultMain.aspx"></iframe> </div> </div> </body>