选项卡回退历史刷新回到上次点击的选项卡

之前写电商网页的时候，很多个页面的需求是有多个选项卡，点击不同选项卡进行切换，点击当前选项卡的某个链接跳转之后，按回退历史键，如果不进行任何处理，页面会默认回到第一个选项卡，这样客户体验感，之后找到了解决方法，分享出来希望对大家有帮助：

在页面tab切换的时候的，通过history.replaceState将当前的页面状态保持-将修改页面的URL的，但是不会重新加载页面；当页面返回重新显示的时候，判断是否有特定值。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>History replace</title>
    <script type="text/javascript" src="../js/jquery-1.12.0.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];
                $(".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>
<div class="tab">
    <div class="tab1 tab-option selected" data-tab-id="0">Tab1</div>
    <div class="tab2  tab-option" data-tab-id="1">Tab2</div>
    <div></div>
</div>
<div class="tab-content show" data-tab-id="0">
    <div><a href="divtest.html">detail</a></div>
</div>
<div class="tab-content" data-tab-id="1">
    <div>TAB2 Content
        <div><a href="test.html">detail</a></div>
    </div>
</div>
</body>
</html>

文章转自：https://blog.csdn.net/caikys/article/details/78685922

选项卡回退历史刷新回到上次点击的选项卡

相关推荐