若依框架(RuoYi)动态选项卡的使用
若依框架(RuoYi)动态选项卡的使用
·
最近做页面时,想要实现这样的效果:
数据以选项卡的形式展示,点击哪个选项卡展示对应的具体信息,再次点击则会关闭。如下图。
若依呢也是封装的有这种动态选项卡,相信使用过的人知道若依是通过a标签和div标签做的绑定。
原理呢就是给A标签的href赋值指定跳转到某个锚点;赋值方式为 href=“#abc”,abc可以表示div的id,
a标签的name等等,这样点击A标签时就会跳转到对应的节点。如下图
我们知道后端传的是个集合数据,是要对选项卡进行循环,当多个选项卡的href属性值和div的id值相同
时,点击哪一个都是那自然是无法实现我们想要的效果。
因此我们需要对href属性和id属性进行动态赋值,如下
注意:a标签的href属性赋值 #abc 表示跳转到某个具体节点,若是光赋值 # 时,则是回到页面顶部
更多推荐
已为社区贡献5条内容
所有评论(0)