TAB子页面切换中遇到的问题

el-tabs切换按钮定位不准确,部分内容被遮挡(前端vue实战踩坑记录) 阅读详情

一个页面有时需要显示多项内容,每项内容都是一个子页,切换项目的时候内容部分会切换。实现这个功能可以用iframe,现在没有用到iframe,通过js控制内容的显示与隐藏。

但这样存在问题,假设有三个子页,当第二个子页必须刷新时,页面重新加载得到的却是第一个子页的内容(因为三个子页是一个整体,而第一个子页为默认显示页面)。

这个时候可以通过在URL中添加一个参数标识将要显示第几个子页(例如tab=2显示第二个子页),然后在模板页处理时直接设置子页的css类,隐藏或者显示子页。

当使用URL参数时,可以在控制器类中根据参数值直接设置相应子页的css类参数。

例如当tab = 1时,设置tab_1_class = "hidden", tab_2_class = "selected", tab_3_class = "hidden",然后在子页相应位置输出这些参数,但这样做增加了控制器和视图的耦合。

还可以在模板中通过三个判断来设置相应子页的显示与否,

以ThinkPHP模板为例

<eq name="tab" value="1">class="selected"</eq>

<eq name="tab" value="2">class="selected"</eq>

<eq name="tab" value="3">class="selected"</eq>

但这样降低了效率,

寻找一个折衷的办法,在视图中这样操作

tab_1_class = "hidden";

 tab_2_class = "hidden";

 tab_3_class = "hidden";

if(tab == 1)
{

   tab_1_class = "selected";

}else if ( tab == 2 )

{

  tab_2_class = "selected";

}else

{

 tab_3_class = "selected";

}

但这样似乎又破坏了视图的整洁性。

也可以在模板页面中写入子页的js参数,页面加载之后根据子页的js参数设置子页的显示与否,但这样做用户体验并不好,因为在页面加载之前和加载之后用户看到的是截然不同的内容。

同理,不再使用URL参数了,而使用URL锚点信息,在页面加载后用js获得锚点信息,然后根据锚点信息确定哪一个子页是当前需要显示的页面(location.lash可以获得锚点信息)。

编程生活中有很多折衷,怎么取舍,全凭项目及个人。

左侧Tab切换页面实现 最近在家待业,一边找工作,一边在学习Web前段的开发,刚好自己在玩一个站点,目前正在设计中,在PS中做好图后转化成页面,今天在碰到一个需要实现左侧Tab页面切换的效果,研究了一下,最终实现,在优快云中记录下来,以备日后忘记查阅。设计的最终效果图如下所示:之所以选择使用Tab页面切换来显示页面中的内容是因为要显示的内容属于同一类型,内容能在该类型中很清晰的分组,这样有利于用户在浏览的时 阅读详情

相关推荐

切换Tab页面不重复刷新页面/请求数据问题

切换Tab页面不重复刷新页面/请求数据问题

m0_50298323的博客 7675

dataTable tab栏切换时错位解决办法

做后台管理类网站肯定要写列表,首选dataTable,功能强大 最近在做一个tab栏切换时发现了一个很诡异的事情:表头错位了! 主要时因为当table被隐藏后,table的header宽度会计算错乱,解决方案就是在table切换的时候重新调整列的宽度,找到好多解决方案,不过最简单的是下面这种: var table = $.fn.dataTable.fnTables(true); if ( ta...

weixin_33834628的博客 644

简易tabs切换

只是个DEMO,样式没有细做 博文链接:https://baukh.iteye.com/blog/2085398

php 实现tab切换_纯php打造的tab选项卡效果代码(不用js)

1.根据get判断,获取get生成cssif(!isset($_GET['city_id'])){$city_id = 12;}else{$city_id = $_GET['city_id'];}echo '.a'.$city_id.'{color:red;}';for($i=12;$i<=16;$i++){if($i != $city_id){if ($i != 12 ){echo '.l...

weixin_36108931的博客 269

手把手教你用EG2153搭建开关电源:SOP-8封装驱动芯片的5个设计技巧

本文详细介绍了使用EG2153自振荡半桥驱动芯片搭建开关电源的五个核心设计技巧。内容涵盖从深入理解芯片工作机制、频率编程计算误区、SOP-8封装的热管理方案,到死区时间评估与外部保护电路设计,以及实战调试与故障排查指南,旨在帮助工程师实现稳定可靠的小功率电源设计。

weixin_29200485的博客 378

基于ENVI5.3的Landsat条带去除、辐射定标、大气校正

基于ENVI5.3的Landsat条带去除、辐射定标、大气校正坏带修复辐射定标大气校正 坏带修复 1.下载landsat_gapfill插件,放入“安装目录\Exelis\ENVI53\extensions”,重启ENVI 2. 加载拟处理文件(MTL.txt格式) 3.打开landsat_gapfill 4.选择存放位置并命名文件 5.选择处理文件 辐射定标 1.选择工具Radiometric Calibration 2.选择已修复坏带文件 3.修改参数,选择输出位置及命名文件 大气校正 1

u010198950的博客 1万+

java gui tab切换_几种tab切换详解

1.鼠标移入移出切换tab切换* {padding: 0;margin: 0;}li {list-style: none;}.wrapper {margin: 0 auto;width: 100%;max-width: 1140px;}.tabbox {margin: 40px auto;width: 400px;height: 200px;border: 1px solid #f70;overf...

weixin_32520565的博客 761

Ubuntu1804 关于ubuntu18.04下载软件仓库信息失败,请检查网络连接 的解决方案

今天电脑在更换软件源的时候遇到了这个问题。出现了如上图所示的错误信息。 尝试了各家优快云的博客之后,发现方法大同小异,均无法解决。 方法大多都是要求更换软件源,如下所示: 打开“Ubuntu软件中心”-->点击“编辑”-->点击“软件源”-->在Ubuntu软件界面,“下载自”默认是“中国的服务器”,改为“主服务器”试试 2.打开更新管理器-》设置-》选择站点-》...

weixin_43729409的博客 1万+

php 实现tab切换_Tab选项卡滚动导航切换实现(附代码)

这次给大家带来Tab选项卡滚动导航切换实现(附代码),Tab选项卡滚动导航切换实现的注意事项有哪些,下面就是实战案例,一起来看一下。效果说明:点击tab导航,页面滑动到下方相应板块。并且当页面通过鼠标滚动下去时,上方的tab也可以自动切换到当前位置的板块上。代码说明:js中对两个动作分别写,一个是tab点击下滑到相应板块位置;一个是鼠标滚动下去的时候tab判定当前页面滚动高度切换tab。js:$(...

weixin_36353180的博客 832

芯片低功耗设计的两种常用EDA流程

如题。

EricWZY2008的专栏 5557

matlab RANSAC拟合圆柱【2025最新版】

RANSAC拟合圆柱

点云侠的博客 3135

Fragment嵌套子Fragment,在下电AccOff->上电AccOn后带Tab的子Fragment切换不跟随Tab切换显示对应页面

fragment嵌套的tab+fragment,accOff->accOn,tab切换,fragment页面不更新,需要外层fragment切后才正常,因为进程号没变,怀疑下电后,APP一些资源被回收导致。断开ACC线进行下电,电流从正常掉到0.34左右,固定不变时,再上电,首次打开有tab+fragment的子页面,tab切换卡页面。

qq893182474的博客 287

HandwrittenMathFormulaRecognition:基于YOLOv8的手写数学公式识别系统

输入:包含手写数学公式的图像(拍摄的板书、作业纸等)输出:对应的数字文本形式的数学公式(如LaTeX格式或文本表达式)标准的手写数学表达式数据集,包含在线轨迹及图片,广泛用于公式识别研究。包含近10万对公式图片及对应的LaTeX标注,适合训练公式识别模型。MathBrush公开手写数学公式图像数据集,含多种书写风格。手写数字与符号数据集(MNIST及其扩展)用于基础数学符号的训练。

YOLO 283

Flutter踩坑日记:Tab导航栏保持子页面状态

最近应邀票圈小伙伴躺坑Flutter,项目初步雏形完结。以原来的工具链版本为基础做了Flutter版本,不过后面还是需要优化下项目接入Redux,以及扩展一些Native方法。 这里记录一下在开发过程中碰到的一些小问题。 首先是搭建Tab的时候,切换tab子页面,上一个页面会被释放,导致切换回来时会重新触发initState等生命周期(网络请求是放在这个里面的) 问了一下前同事:“需要使...

weixin_30279671的博客 355

用 Docker 一键部署 SillyTavern酒馆 mac/windows/linux通用教程,我再也不手动折腾了!

本文介绍了如何使用 Docker 一键部署 SillyTavern 项目,适用于 Mac、Windows 和 Linux 系统。SillyTavern 是一个本地部署的大语言模型聊天界面,支持多种插件和扩展。文章详细说明了安装 Docker、拉取项目、启动容器、配置白名单、启用插件等步骤,并提供了常见问题的解决方法。通过 Docker 部署,用户可以避免繁琐的手动配置,快速搭建和运行 SillyTavern,适合希望简化部署流程的用户。

代码简单说 Vue、JAVA、PHP、Node.js 熟练运用,接口、架构、性能全搞定。 2623

Vibe Draw:AI实现2D草图转3D建模,开源免费的设计师宝藏软件!

AI实现2D草图转3D建模,开源免费,设计师进来看一下?

Code_流苏:在代码中寻诗意,在实践中觅真知 2150

layui子页面触发父页面创建tab选项卡,同时处理click首次不触发的问题

实现子页面调用父页面去创建tab选项卡 //父文件 <div class="page-content"> <div class="layui-tab tab" lay-filter="xbs_tab" lay-allowclose="false"> <ul class="layui-tab-title"> <li lay-id='1'>首页</li> &

qq_39189369的博客 1417

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

Flutter解决TabBar顶部页面切换导致页面重载问题

Flutter解决TabBar顶部页面切换导致页面重载问题

weixin_46078387的博客 628

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

mui 登录之后tab切换页面会失灵

我的app做完刚进去的时候底部导航栏的tab切换是正常的,但是退出之后重新登录,我在首页用reload进行了刷新,之后就引发了一些问题,tab切换有时候会失灵,登录转态的改变不成功。原来是reload的时候只是index里面的代码被重新执行了一遍,重新创建了那些子页面导致的,所以在登录的时候我就把除了当前和首页之外的页面全都关闭了,然后再刷新一遍首页就没问题了。 var h=plus.we...

weixin_30645617的博客 664

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

tab页 html子页面,打开不同的tab-webview-mian.html,它们部分tab使用相同的子页面,点击tab,子页面不显示...

详细问题描述由于业务的需要,根据角色类型判断,登录不同的tab-webview-main.html、tab-webview-main-ble.html(具体逻辑在这不详细说明,说具体的问题),其中他俩的四个子页面中有三个是重复的,第一次登录成功后,点击tab中的按钮切换子页面,都是ok的,然后点击设置页面中的切换tab_webview_main按钮,跳转到login.html页面,重新登录,点击t...

weixin_33561350的博客 206

layui tab层使用hikweb视频插件遇见的问题总结

layui tab切换内 iframe使用hik视频web插件遇见的问题总结所遇到的问题解决方案 首先感谢这位大佬的文章带给我的启发。 https://blog.youkuaiyun.com/qq_27933251/article/details/102853252 所遇到的问题 hik web视频插件不支持iframe,在iframe中使用插件会导致插件的位置计算失误。 在layui tab层 tab进行切换的时候,视频插件不会跟着网页去隐藏。 解决方案 第一个问题是通过大佬的启发,但由于大佬忙没有回复我这

Mr_Yyy的博客 466

MUI 使用爬坑之路之 tab 多页面操作

版权声明:本文为 wintersmilesb101 -(个人独立博客– http://wintersmilesb101.online 欢迎访问)博主原创文章,未经博主允许不得转载。 最近想入坑前端开发,也是为了开发 App 更快更接地气。在各种前端框架的纠结中我还是决定先入坑 MUI ,开坑不易,欢迎交流。 首先贴上几个链接 MUI 官网 H5 的相关 API Hb

SmileSB101-(ZXB)的博客 1万+

vant ui tab标签页,页签切换时滚动相互受影响,滚动距离与上一个浏览的页面同步

已解决,目前在赶项目没时间写,后期补上

vera的博客 2814

Unity3d中Tab控件的实现

3.Tab上添加Toggle、ToggleHighlightStaysActiveAfterLosingFocus。5.在Menu上添加TabMenu,系统会自动识别赋值,无需手动赋值。这样就完成了Tab控件的制作。ToggleHighlightStaysActiveAfterLosingFocus.cs代码。2.Tabs上添加Toggle Group组件。4.Page上添加Canvas Group。1.按如下结构建立一个Tabs。TabMenu.cs代码。

zouxin_88的专栏 531

vue ElementUI的Tab选项卡从子页面跳转回对应的选项卡

问题描述 假设tab有3个选项卡(Tab A,Tab B,Tab C),3个选项卡分别对应3个页面(A页面,B页面,C页面),3个页面都可以跳转到自己的子页面(a子页面,b子页面,c子页面),在进行elementUI的tab切换时,在子页面的跳转能回到相应的Tab页面。 解决思路 在C的子页面返回时,返回一个参数type:C 在Tab页面中接收参数,判断type的值,当type=“C”时,改变T...

huangcy的博客 3708

Layui 子页面关闭父页面tab(在子页面关闭有父页面打开的tab标签页)

父级页面js layui.use(['element','layer'], function(){ var element = layui.element; //导航的hover效果、二级菜单等功能,需要依赖element模块 var layer=layui.layer; var $ = layui.$ var active = ...

KliveWanLi的博客 1977
上一篇: fedora网卡配置
下一篇: 数据分组的技巧
henujava
博客等级 码龄17年 5粉丝 18原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值