根据部分url地址高亮显示导航,防文章翻页刷新

      发布在:瞎忙      评论:0 条评论

最近整Ecshop文章列表分类时,利用js对比地址栏跟导航部分url字符高亮显示导航,防文章翻页刷新。

根据部分url地址高亮显示导航,防文章翻页刷新

如图移动端横向滚动导航,翻页地址栏url发生变化,indexOf分别获取地址栏url跟导航url字符"article_cat-"位置,substring再分别获取地址栏url跟导航url字符"article_cat-"后接的分类id,然后比对:

1
2
3
4
5
6
7
8
9
10
11
12
13
var _nava = $('#category_tree li a');
var _url = window.location.href;
for(var i = 0; i<_nava.length ; i++){
    var _astr = _nava.eq(i).attr('href');
    var sub_nava = _astr.indexOf("article_cat-");
    var sub_url = _url.indexOf("article_cat-");
    if(_astr.substring(sub_nava+12,sub_nava+14) == _url.substring(sub_url+12,sub_url+14)){
         _nava.eq(i).addClass('current_li').siblings().removeClass('current_li');
        //高亮移至首位
        _nava.eq(i).parent().clone().prependTo('#category_tree');
        _nava.eq(i).parent().remove();
    }
}
Responses