最近做页面时,想要实现这样的效果:
数据以选项卡的形式展示,点击哪个选项卡展示对应的具体信息,再次点击则会关闭。如下图。

在这里插入图片描述

若依呢也是封装的有这种动态选项卡,相信使用过的人知道若依是通过a标签和div标签做的绑定。

原理呢就是给A标签的href赋值指定跳转到某个锚点;赋值方式为 href=“#abc”,abc可以表示div的id,

a标签的name等等,这样点击A标签时就会跳转到对应的节点。如下图

在这里插入图片描述

我们知道后端传的是个集合数据,是要对选项卡进行循环,当多个选项卡的href属性值和div的id值相同

时,点击哪一个都是那自然是无法实现我们想要的效果。

因此我们需要对href属性和id属性进行动态赋值,如下

在这里插入图片描述

注意:a标签的href属性赋值 #abc 表示跳转到某个具体节点,若是光赋值 # 时,则是回到页面顶部

Logo

快速构建 Web 应用程序

更多推荐