选项卡

最新推荐文章于 2024-05-24 21:00:15 发布

嗷嗷酱

最新推荐文章于 2024-05-24 21:00:15 发布

阅读量96

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44540706/article/details/93965756

本文介绍了一种使用A标签实现页面内不同数据展示的方法，通过按钮点击切换显示和隐藏特定内容区域，同时解决了屏幕宽度变化导致的布局问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

				选项卡

开发工具与关键技术：
作者：
撰写时间：
如何做到点击按钮，本页面切换为不同的数据，点击按钮原来的画面隐藏，然后显示出另一个画面。
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190628083839441.PNG)
首先是设置按钮，写两个A标签，利用A标签的属性跳转页面。在A标签的跳转那里写上要跳转到的地方。
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190628083847145.PNG)
接下来是跳转到的地方，在表格的上方写查询的样式，接着是layui表格的ID
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190628083854504.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDcwNg==,size_16,color_FFFFFF,t_70)
写成这样还差一点，有一个bug有几率会遇到，就是点击按钮，点着点着就会有个页面缩回去一半，这时就要给屏幕设置宽度，当屏幕发生变化时触发。
function setWidth() {
                var width = $("#nav-tabContent").width() * 0.99;;
                $("#table1").width(width);
               
                $("#table2").width(width);               
            }
            //浏览器视口改变时触发
            $(window).resize(function () {
                setWidth();
               
            });
然后把setWidth();写在表格渲染那里，这样就可以了。