简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - js有什么办法返回上一个页面并不刷新代码
高洛峰
高洛峰 2017-04-11 12:03:35
0
4
813

如图，我点击了tab栏新手切换到风水，再点击某一遍文章的时候，利用window.history.back()返回上一页，但是返回上一个页面的时候，代码刷新了，tab状态从风水跳回新手；有什么办法保持我上一页的代码不刷新；

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师，...

reply all(4)
小葫芦
小葫芦2017-04-11 12:05:35 4 floor

方法1:做成单页面，通过url hash或history.pushState来保持当前页面的状态，监听popstate事件
方法2:在页面tab切换的时候的，通过history.replaceState将当前的页面状态保持-将修改页面的URL的，但是不会重新加载页面；当页面返回重新显示的时候，判断是否有特定值

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>History replace</title>

    <script type="text/javascript" src="jquery.min.js"></script>

    <style>
        .tab{
            width: 300px;
            height: 50px;
            background-color: #0a6ebd;
            display: inline-block;
            border: 1px solid #cccccc;
            font-size: 0px;
            line-height: 50px;
        }

        .tab .tab-option{
            height: 100%;
            width: 100px;
            background-color: #0da6ec;
            color:#000000;
            display: inline-block;
            color:#ffffff;
            font-size: 14px;
            text-align: center;
            vertical-align: middle;
            cursor: pointer;
        }

        .tab .tab-option.selected{
            background-color: #ffffff;
            color:#000000;
        }

        .tab-content{
            width: 100%;
            height: 300px;
            border: 1px solid #cccccc;
            background-color: #ffffff;
            display: none;
        }

        .tab-content.show{
            display: block;
        }


    </style>
    <script>
        $(function(){
            var defaultTabId="";
            
            $(".tab").on("click",".tab-option",function(){
                var dataTabId=$(this).attr("data-tab-id");
                $(".tab").find(".tab-option").removeClass("selected");
                $(this).addClass("selected");
                $('.tab-content').removeClass("show");
                $('.tab-content[data-tab-id='+dataTabId+']').addClass("show");

                history.replaceState({selectedTab:dataTabId},"","#tab="+dataTabId);
            });


            if(location.hash){
                defaultTabId=location.hash.substr(1).split("=")[1];
                console.log(defaultTabId);
                $(".tab").find(".tab-option").removeClass("selected");
                $('.tab-option[data-tab-id='+defaultTabId+']').addClass("selected");
                $('.tab-content').removeClass("show");
                $('.tab-content[data-tab-id='+defaultTabId+']').addClass("show");
            }



        });
    </script>
</head>
<body>

<p class="tab">
    <p class="tab1 tab-option selected" data-tab-id="0">Tab1</p>
    <p class="tab2  tab-option" data-tab-id="1">Tab2</p>
    <p></p>
</p>
<p class="tab-content show" data-tab-id="0">
    <p><a href="ptest.html">detail</a></p>
</p>
<p class="tab-content" data-tab-id="1">
    <p>TAB2 Content
        <p><a href="ptest.html">detail</a></p>
    </p>
</p>
</body>
</html>
Like +0
Add Reply
伊谢尔伦
伊谢尔伦2017-04-11 12:05:35 3 floor

做成单页应用就好

Like +0
Add Reply
Ty80
Ty802017-04-11 12:05:35 2 floor

把首页你选择的tab分类存在缓存里吧 这样回退到首页就还能选择到之前的分类了

Like +0
Add Reply
迷茫
迷茫2017-04-11 12:05:35 1 floor

了解一下H5的history.pushState()

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！