养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

tab页控制iframe切换

时间:2024-11-02 16:27:42

一般开发如果包括左右两部分,左边的操作后,连动加载右边的信息,采用iframe,但是不利于控制样式,本次发现了一个新的方式,跟大家分享一下

工具/原料

jQuery

javascript

方法/步骤

1、这个一个组织机构树和对应的信息tab页,在菜单树上选择后要更新tab,这两部分并没有采用iframe,是用div写了树和tab两部分。

tab页控制iframe切换

2、发现的问题是:选择第三个tab后,点树上的节点,tab不会自动跳转到第一个tab,因为没有刷新,如果用的是iframe,重新加载即可,不会出现这个问题,但是我用的是div,怎么解决这个问题呢?

tab页控制iframe切换

3、我的骈禄笫杳解决方法是,清空tab页的html,然后重新加载这部分的html,这个问题就解决了,需要注意的重新加载html后要重新加载tab的o荏鱿胫协nclick事件。这一步操作跟iframe重新加载是一样的效果。

tab页控制iframe切换

4、这里执行了两个方法:铮喘饿怊$("#tabs").empty();empty()方法从被选元素移除所有内容,包括所有文本和子节点$("#tabs媪青怍牙").prepend(str);prepend()方法在被选元素的开头插入内容具体的方法建议大家参考w3school

tab页控制iframe切换

5、前台jsp就比较简单,只需要给需要重新加载的div增加id属性就可以了,主要操作都在js里面。

tab页控制iframe切换

© 一点知识