layui tab列表刷新回退问题

layui tab列表刷新回退问题

话不多说:直接上问题;
就是说 我从左边这些东西点进去的时候都能得到我想要的页面以及里面的数据,而当我从新刷新页面的时候会自动返回到第一个tab标签栏里面(如下图:就是大写黑色1里面的内容),因为他们的地址栏都是一样的,
在这里插入图片描述
而layui怎样才能解决这个问题呢?

<script>
    $(".layui-tab-title li").click(function(){
        var picTabNum = $(this).index();
        sessionStorage.setItem("picTabNum",picTabNum);
    });
    $(function(){
        var getPicTabNum = sessionStorage.getItem("picTabNum");
        $(".layui-tab-title li").eq(getPicTabNum).addClass("layui-this").siblings().removeClass("layui-this");
        $(".layui-tab-content>div").eq(getPicTabNum).addClass("layui-show").siblings().removeClass("layui-show");
    })
</script>

如果只是用了form表单之类的添加上面代码就能实现了,而如果添加完了上面代码以后,当我们再次点击刷新按钮的时候页面只是从第一个tab标签闪了一下到我们想去的标签,且里面没有数据的时候,请添加下列代码:

if(getPicTabNum==0){
				code="xxxx";//将标签的名字重新赋值给code
				getInfo(code);
			}
if(getPicTabNum==1){
				code="xxxx";
				getInfo(code);
			}

如果这么做还是不行的话!!!
那么就在以上代码的后面加上显示模块的内容即可~

if(code=="xxxx")
{
		//把想要显示的内容重新在这里写一遍即可!
}

下面附 bootstrap tab标签刷新回退链接

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
layui 是一款优秀的前端 UI 框架,其中提供了很多实用的组件,其中包括 tab 组件。tab 组件可以用于制作选项卡切换效果,用起来非常方便。 使用 layui tab 组件实现切换效果的步骤如下: 1. 引入 layui 的样式文件和相关 JS 文件。 2. 在 HTML 文件中添加 tab 容器,如下: <ul class="layui-nav layui-tab" lay-filter="tab"> </ul> 3. 在 JS 文件中定义 tab 的数据,如下: layui.use(['element', 'layer', 'form', 'jquery', 'tab'], function () { var element = layui.element, layer = layui.layer, form = layui.form, $ = layui.jquery, tab = layui.tab; tab.tabAdd({ title: '选项卡标题', content: '选项卡内容', id: '选项卡ID' }); }); 4. 可以添加多个选项卡,即在上面的函数中多次调用 tabAdd 方法。 5. 设置动态加载选项卡内容的方法,如下: //动态获取选项卡内容 function getTabContent(tabId) { var title = $('#' + tabId).text(); if (title == '选项卡1') { return '选项卡1内容'; } else if (title == '选项卡2') { return '选项卡2内容'; } } 6. 绑定 tab 切换事件,如下: // 利用事件委托方式,新增选项卡切换事件 $(document).on('click', '.layui-tab-title li', function () { var tabId = $(this).attr('lay-id'); var content = getTabContent(tabId); tab.tabChange(tabId); }); 7. 最后在 HTML 文件中添加相应的选项卡,即可实现 tab 切换效果。 以上就是使用 layui tab 组件实现切换效果的主要步骤,具体实现可以根据自己的需要进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

她很幸福丶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值