很多小伙伴都知道选项卡切换的这一个功能,那么呢 我又来介绍一下我自己创作类似于选项卡分页的操作。我用的开发工具是Visual Studio 2015,这个开发工具是十分流行的。废话不说。接下来就跟着我开始吧
首先第一步就是打开Visual Studio 2015。
类似选项卡的分页操作
接着就是创建一个方法以视图的形式返回。
类似选项卡的分页操作
接着我们要搭建页面。因为这一步有点重要所以要详细说一下
我们要做的是页面分为三个部分 就比如说吧一个餐厅有三层楼
第一层楼有十张桌子,第二层也有十张桌子,第三层只有九张桌子。
那么现在我需要在页面上只显示一层楼的桌台信息,但是我点击
其他楼层又要显示它的桌台信息。也就是说点击一楼可以看到一楼桌台
信息,点击二楼又可以看到二楼的桌台信息。但是它们只能显示一层。
怎么做呢,接下来跟着我们的步伐。
我们首先在左边用一个div包裹着,右边也是。左边是楼层信息 右边是桌台信息。

类似选项卡的分页操作
类似选项卡的分页操作
这个就是代码的主要部分,是一层楼的桌台信息,另外两层也是差不多一样的 因为代码太长就省略一部分,不过要给这三个div定位,使得它们都叠在一起。然后就把其中的两个隐藏掉,就是给它设置display:none的样式。这样的话就只显示一层楼层信息。
类似选项卡的分页操作
设置好样式之后就是js的代码部分,大概就是点击一楼 二楼和三楼就隐藏,
点击二楼 一楼三楼就隐藏,点击三楼一楼二楼隐藏。
要给它都加上id id是唯一的 这样选中的话方便一点
类似选项卡的分页操作
这样的话就差不多可以实现类似与选项卡的·功能了
页面效果:点击楼只看到一楼桌台信息
类似选项卡的分页操作
点击二楼只能看到二楼桌台信息:
类似选项卡的分页操作
那么呢 到这里文章就差不多了
谢谢阅读

相关文章:

  • 2021-11-20
  • 2022-12-23
  • 2022-12-23
  • 2021-11-28
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-02-09
猜你喜欢
  • 2021-09-10
  • 2022-12-23
  • 2021-12-23
  • 2022-12-23
  • 2021-12-20
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案