Question

我正在实现，如果我刷新页面，它应该激活以前选择的选项卡（保留选定的选项卡）。所以我创建一个简单的html页面并添加一些jQuery 但是，如果我将Text手动更改为file:///home/2.html#news

它只更改了网页的内容，但没有更改选中的标签。

这是我的代码。

file:///home/2.html#home

Answer 1

当你有链接哈希时，你实际上并没有重新加载页面，但浏览器只是触发这些链接。您依赖于CSS :target更改规则，该规则会在每次#hash更改网址时进行评估。

p {
    display: none;
}

:target {
    display:block;
    border: 2px solid #D4D4D4;
    background-color: #e5eecc;
}

因此，即使没有刷新页面，也可以正确更新所有部分。为了具有此类功能，您不需要将任何数据存储到本地或远程计算机，因为您在URL上使用哈希。只需使用哈希并处理hashchange事件，即可将.activate类添加到以下链接中：

$(document).ready(function() {
    var hash = window.location.hash;

    if(hash.length > 0) {
        hash = hash.substring(1);
        $('li a[href$='+hash+']').parent().addClass('active');
    }

    $(window).on('hashchange', function() {
        $('.active').removeClass('active');
        var hash = window.location.hash
        if(hash.length > 0) {
            hash = hash.substring(1);
            $('li a[href$='+hash+']').parent().addClass('active');
        }
    });
});

点击此处查看我的工作示例：http://zikro.gr/dbg/html/urlhash.html#about

更改网址不会更改所选的标签

1 个答案: