js 實現刷新頁面保留當前tab切換狀態

時間 2019-12-05
原文原文鏈接
<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; });
複製代碼