js 实现刷新页面 保留当前tab切换状态

最新推荐文章于 2024-05-03 10:06:59 发布
最新推荐文章于 2024-05-03 10:06:59 发布
阅读量3.4k 收藏 2
点赞数
文章标签： javascript 后端 前端 ViewUI
原文链接：https://juejin.im/post/5cdc3c2af265da037371ab84
版权 
 <div class="mes-tab">
                    <div class="tab-tit flexbetween" id="tabTit">
                        <span>报考指南</span>
                        <span>考研院校</span>
                        <span>考研专业</span>
                        <span>备考资料</span>
                        <span>复试调剂</span>
                    </div>
                    <div class="tab-cont" id="tabCont">
                        <div>
                            <a href="file:///C:/Users/Administrator/Desktop/%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%9F%A5%E8%AF%86%E5%BA%931.html#1" title="招生简章">招生简章</a>
                            <a href="file:///C:/Users/Administrator/Desktop/%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%9F%A5%E8%AF%86%E5%BA%931.html#2" title="报录比">报录比</a>
                            <a href="file:///C:/Users/Administrator/Desktop/%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%9F%A5%E8%AF%86%E5%BA%931.html#3" title="报考类">报考类</a>
                        </div>
                        <div class="ops">
                            <a href="file:///C:/Users/Administrator/Desktop/%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%9F%A5%E8%AF%86%E5%BA%931.html#4" title="东北地区">东北地区</a>
                            <a href="file:///C:/Users/Administrator/Desktop/%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%9F%A5%E8%AF%86%E5%BA%931.html#5" title="华东地区">华东地区</a>
                            <a href="file:///C:/Users/Administrator/Desktop/%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%9F%A5%E8%AF%86%E5%BA%931.html#6" title="华北地区">华北地区</a>
                            <a href="file:///C:/Users/Administrator/Desktop/%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%9F%A5%E8%AF%86%E5%BA%931.html#7" title="华南地区">华南地区</a>
                            <a href="file:///C:/Users/Administrator/Desktop/%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%9F%A5%E8%AF%86%E5%BA%931.html#8" title="西南地区">西南地区</a>
                            <a href="file:///C:/Users/Administrator/Desktop/%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%9F%A5%E8%AF%86%E5%BA%931.html#9" title="西北地区">西北地区</a>
                        </div>
                        <div>
                            <a href="file:///C:/Users/Administrator/Desktop/%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%9F%A5%E8%AF%86%E5%BA%931.html#10" title="哲学">哲学</a>
                            <a href="file:///C:/Users/Administrator/Desktop/%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%9F%A5%E8%AF%86%E5%BA%931.html#11" title="经济学">经济学</a>
                            <a href="file:///C:/Users/Administrator/Desktop/%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%9F%A5%E8%AF%86%E5%BA%931.html#12" title="法学">法学</a>
                            <a href="file:///C:/Users/Administrator/Desktop/%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%9F%A5%E8%AF%86%E5%BA%931.html#13" title="教育学">教育学</a>
                            <a href="file:///C:/Users/Administrator/Desktop/%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%9F%A5%E8%AF%86%E5%BA%931.html#14" title="文学">文学</a>
                            <a href="file:///C:/Users/Administrator/Desktop/%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%9F%A5%E8%AF%86%E5%BA%931.html#15" title="历史学">历史学</a>
                            <a href="file:///C:/Users/Administrator/Desktop/%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%9F%A5%E8%AF%86%E5%BA%931.html#16" title="理学">理学</a>
                            <a href="file:///C:/Users/Administrator/Desktop/%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%9F%A5%E8%AF%86%E5%BA%931.html#17" title="文学">文学</a>
                            <a href="file:///C:/Users/Administrator/Desktop/%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%9F%A5%E8%AF%86%E5%BA%931.html#18" title="农学">农学</a>
                            <a href="file:///C:/Users/Administrator/Desktop/%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%9F%A5%E8%AF%86%E5%BA%931.html#19" title="医学">医学</a>
                            <a href="file:///C:/Users/Administrator/Desktop/%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%9F%A5%E8%AF%86%E5%BA%931.html#20" title="军事学">军事学</a>
                            <a href="file:///C:/Users/Administrator/Desktop/%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%9F%A5%E8%AF%86%E5%BA%931.html#21" title="管理学">管理学</a>
                            <a href="file:///C:/Users/Administrator/Desktop/%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%9F%A5%E8%AF%86%E5%BA%931.html#22" title="艺术学">艺术学</a>
                            <a href="file:///C:/Users/Administrator/Desktop/%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%9F%A5%E8%AF%86%E5%BA%931.html#23" title="专业硕士">专业硕士</a>
                        </div>
                        <div>
                            <a href="file:///C:/Users/Administrator/Desktop/%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%9F%A5%E8%AF%86%E5%BA%931.html#24" title="考研英语">考研英语</a>
                            <a href="file:///C:/Users/Administrator/Desktop/%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%9F%A5%E8%AF%86%E5%BA%931.html#25" title="考研政治">考研政治</a>
                            <a href="file:///C:/Users/Administrator/Desktop/%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%9F%A5%E8%AF%86%E5%BA%931.html#26" title="考研数学">考研数学</a>
                            <a href="file:///C:/Users/Administrator/Desktop/%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%9F%A5%E8%AF%86%E5%BA%931.html#27" title="联考">联考</a>
                            <a href="file:///C:/Users/Administrator/Desktop/%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%9F%A5%E8%AF%86%E5%BA%931.html#28" title="考研大纲">考研大纲</a>
                        </div>
                        <div>
                            <a href="file:///C:/Users/Administrator/Desktop/%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%9F%A5%E8%AF%86%E5%BA%931.html#29" title="考研复试">考研复试</a>
                            <a href="file:///C:/Users/Administrator/Desktop/%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%9F%A5%E8%AF%86%E5%BA%931.html#30" title="考研调剂">考研调剂</a>
                            <a href="file:///C:/Users/Administrator/Desktop/%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%9F%A5%E8%AF%86%E5%BA%931.html#31" title="分数线">分数线</a>
                            <a href="file:///C:/Users/Administrator/Desktop/%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%9F%A5%E8%AF%86%E5%BA%931.html#32" title="成绩查询">成绩查询</a>
                        </div>
                    </div>
                </div>
                
                 // 默认值
            $('.tab-cont > div:eq(0)').addClass('show');
            $('#tabTit > span:eq(0)').addClass('on');
                //   得到a标签的所有href
                var hrefArr0 = []; 
                var hrefArr1 = []; 
                var hrefArr2 = []; 
                var hrefArr3 = []; 
                var hrefArr4 = []; 
                var http_url = window.location.href;
                function urrHref(x, z, y, m, j) {
                    x.each(function () { hrefArr0.push($(this).attr('href')); });
                    z.each(function () { hrefArr1.push($(this).attr('href')); });
                    y.each(function () { hrefArr2.push($(this).attr('href')); });
                    m.each(function () { hrefArr3.push($(this).attr('href')); });
                    j.each(function () { hrefArr4.push($(this).attr('href')); });
                }
                urrHref($('#tabCont div:eq(0) a'), $('#tabCont div:eq(1) a'), $('#tabCont div:eq(2) a'), $('#tabCont div:eq(3) a'), $('#tabCont div:eq(4) a'));
            // /
            function tIT0() {
                 hrefArr0.forEach(function (val) { 
                $('#tabTit > span:eq(0)').addClass('on').siblings('span').removeClass('on'),
                 $('#tabCont > div:eq(0)').addClass('show').siblings('div').removeClass('show');
                 if (http_url == val) $('#tabCont > div:eq(0) a[href="' + val + '"]').addClass('active');
                 });
            }
            function tIT1() {
                $('#tabTit > span:eq(1)').addClass('on').siblings('span').removeClass('on'),
                 $('#tabCont > div:eq(1)').addClass('show').siblings('div').removeClass('show');
                 hrefArr1.forEach(function (val) { 
                 if (http_url == val) $('#tabCont > div:eq(1) a[href="' + val + '"]').addClass('active');
                 });
            }
            function tIT2() {
                $('#tabTit > span:eq(2)').addClass('on').siblings('span').removeClass('on'),
                    $('#tabCont > div:eq(2)').addClass('show').siblings('div').removeClass('show');
                    hrefArr2.forEach(function (val) { 
                 if (http_url == val) $('#tabCont > div:eq(2) a[href="' + val + '"]').addClass('active');
                 });
            }
            function tIT3() {
                $('#tabTit > span:eq(3)').addClass('on').siblings('span').removeClass('on'),
                    $('#tabCont > div:eq(3)').addClass('show').siblings('div').removeClass('show');
                    hrefArr3.forEach(function (val) { 
                 if (http_url == val) $('#tabCont > div:eq(3) a[href="' + val + '"]').addClass('active');
                 });
            }
            function tIT4() {
                $('#tabTit > span:eq(4)').addClass('on').siblings('span').removeClass('on'),
                    $('#tabCont > div:eq(4)').addClass('show').siblings('div').removeClass('show');
                    hrefArr4.forEach(function (val) { 
                 if (http_url == val) $('#tabCont > div:eq(4) a[href="' + val + '"]').addClass('active');
                 });
            }

            $('#tabCont a').each(function () {
                $(this).click(function () { //循环点击每个a标签
                    window.localStorage.setItem('a', $(this).attr('href'));  //点击a存贮其href
                     urlLocationGet1 = window.localStorage.getItem('a');//取值href
                   eachsURl();// 判断点击存的href与a标签的href
                });
                 urlLocationGet1 = window.localStorage.getItem('a');//重新取值href
                eachsURl()// 判断存的href与a标签的href
            });
            // 循环取到每个a的href
            function eachsURl() {
                hrefArr0.forEach(function (val) { urlLocationGet1 == val ? (tIT0()) : true; });
                hrefArr1.forEach(function (val) { urlLocationGet1 == val ? (tIT1()) : true; });
                hrefArr2.forEach(function (val) {  urlLocationGet1 == val ? ( tIT2() ) : true; });
                hrefArr3.forEach(function (val) { urlLocationGet1 == val ? ( tIT3() ) : true; });
                hrefArr4.forEach(function (val) { urlLocationGet1 == val ? ( tIT4() ) : true; });
            }
            // $('#tabCont a').click(function () {
            //     window.location.reload();//触发刷新
            // });
            //实时判断loaction.href == href
            hrefArr0.forEach(function (val) { http_url == val ? (tIT0()) : true; });
            hrefArr1.forEach(function (val) { http_url == val ? (tIT1()) : true; });
            hrefArr2.forEach(function (val) { http_url == val ? (tIT2()) : true; });
            hrefArr3.forEach(function (val) { http_url == val ? (tIT3()) : true; });
            hrefArr4.forEach(function (val) { http_url == val ? (tIT4()) : true; });
复制代码
weixin_34220963
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS实现Tab内容切换，页面不刷新，内容切换，网址变化
07-05
JS实现Tab内容切换，页面不刷新，内容切换，网址对应变化，效果非常好。
js实现多屏/跨屏窗口放置
奇舞周刊
05-17 8001
点击上面“前端妙音坊”关注我们吧！ 目前有越来越多的开发者外接多个显示器进行工作，但是有没有发现你在浏览器中打开新窗口时，都只会显示在你当前的显示屏里，如果想放置在某个浏览器中，需要...
chrome单击打开标贴在当前窗口的新标签页设置
weixin_45789404的博客
11-03 4206
谷歌浏览器chrome，设置所有打开的新标签页在当前窗口打开的新窗口
刷新页面后让控制台的js代码继续执行
10-16
主要介绍了刷新页面后让控制台的js代码继续执行，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
JS打开新标签页（window.open应用）
weixin_40362806的博客
06-05 4207
JS打开新标签页
js源码跳转的几种方式，在当前页面跳转，在空白页跳转
睡竹的博客
08-01 3080
js源码跳转的几种方式，在当前页面跳转，在空白页跳转
JS-JavaScript打开新页面的两种方式：当前页面打开和新页面打开
weixin_42565127的博客
09-27 8715
在实际的开发过程中，经常会遇到需要刷新当前页面或者打开新页面的需求，根据具体情况我们会选择不同的打开方式，今天就简单记录一下两种方式的写法
切换tab页，页面局部刷新，地址栏路径修改 js
11-15
使用js，实现切换tab页，页面局部刷新（并未重新加载），地址栏路径修改的效果。
angularjs渲染bootstraps实现tab页切页面不刷新换使用ui-router-tabs插件
01-17
项目使用 angularJS ui-router-tabs angular-ui-router 实现tab页切换， 1、亮点 1）tab页间切换缓存tab页数据 2）刷新页面，保留已经打开的tab页，当前活动tab为上次活动的tab 3）使用嵌套路由，实现单页面应用
HTML页面局部刷新的实现代码
12-10
事件响应刷新：有请求才会刷新 1、通过JS HTML DOM或jQuery获取HTML元素，通过DOM方法或jQuery方法监听页面事件，获取用户请求； 2、通过Ajax将用户请求提交至服务器，服务器处理后返回结果，再由Ajax接收数据； 3、...
jquery实现的仿天猫侧导航tab切换效果
11-24
这里演示jquery实现仿天猫侧导航tab切换效果，引入外部JS,若初次运行有错误请刷新一页面即可。本菜单是仿天猫商城的菜单，大块的div菜单，支持超多的产品分类，大网站风格，大气实用的多分类网页菜单。 运行效果截图...
vuejs中如何实现三级路由并刷新页面时保持当前路由激活状态
itclanCoder
09-15 2380
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号（ID：itclanCoder）如果不知道如何操作点击这里,标星不迷路前言之前有介绍过vuejs中的路由的传参及路由的props配置,对于如何配置一级路由,二级路由,对于很多同学来说,基本上没什么难度然后在配置三级路由以上的时候,往往却没那么容易,会出现...
tab选项卡切换后 刷新页面如何停留在当前选项卡页面
热门推荐
卡卡罗特的博客
03-27 2万+
在项目中经常用到标题tab选项卡，来切换不同的内容，但是每次刷新后，都会回到默认显示页，如果在其他页面执行操作后刷新，跑到默认页而不是当前页，就很恶心了。本例主要是是利用H5的，sessionStorage缓存，来记录下标，从而在页面刷新时，回到相应的页面。记得引用JQuery,代码如下。css基于layui.css &lt;div class="layui-tab layui-tab-brief...
jQuery刷新页面
weixin_44345664的博客
05-31 9769
方法1：使用location.reload() location.reload()方法重新加载当前web页面，此方法类似于你浏览器上的刷新页面按钮。如果把该方法的参数设置为 true参数，可强制页面从服务器加载并忽略浏览器缓存。 语法： location.reload(true) 方法2：使用history.go(0) history.go()方法根据传递给它的参数从浏览器历史记录中加载一个URL。如果传递的参数为“0”，则会重新加载当前页。 语法： history.go(0); .
JS实现重新加载当前页面
moxiaolin的博客
05-11 1万+
document.location.reload();//重新加载当前页面 window.parent.main.document.location.reload();//上级页面
js动态对选项卡(tab切换)添加内容
weixin_33704234的博客
05-13 3033
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
Javascript js中页面的重新加载
紫竹blog
07-23 9310
用JavaScript刷新上级页面和当前页面 window.parent.main.document.location.reload();//上级页面 document.location.reload();//当前页面 每个frame元素或者iframe元素就是一个框架,这个框架是一个窗口,在这个窗口中加载一个html文档.使用下面的几种方法都可以引用frame或ifra
基于Springboot的家具网站
最新发布
趙兴晨的博客
05-03 579
本文介绍了一款基于现代Web技术构建的家具网站，旨在通过互联网技术优化家具产品的展示与销售，提高用户的购物体验，同时为家具制造商和零售商提供一个高效的在线销售平台。本研究的主要目的是设计并实现一个高效、易用的家具网站，通过系统化的产品展示流程和智能化的购物功能，提升家具产品的在线销售效率和管理水平。本研究通过设计和实现家具网站，有效地解决了传统家具销售中的展示局限性和购物效率低下的问题，提高了家具产品的在线销售效率和用户的购物体验，并为相关领域的研究和实践提供了有益的参考。
layui的多tab刷新当前tab页面的代码如何实现
05-31
你可以使用layui的`element.tabChange()`方法来切换当前选项卡，并且设置`reload: true`，实现刷新当前选项卡的页面。具体的代码实现如下所示： ```javascript // 监听选项卡切换事件 element.on('tab(tab-id)', function(data) { // 获取当前选项卡的id var tabId = data.elem.context.attributes['lay-id'].nodeValue; // 判断当前选项卡是否需要刷新 if (data.elem.context.attributes['reload'].nodeValue === 'true') { // 刷新当前选项卡的页面 element.tabChange('tab-id', tabId); } }); ``` 在HTML中设置选项卡时，需要给需要刷新的选项卡添加`reload="true"`属性，如下所示： ```html <ul class="layui-tab-title"> <li class="layui-this" lay-id="1" reload="false">选项卡1</li> <li lay-id="2" reload="true">选项卡2</li> <li lay-id="3" reload="false">选项卡3</li> </ul> ``` 这样就可以实现点击需要刷新的选项卡时，刷新当前选项卡的页面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值