Ajax不会让css当前链接样式正常工作 [英] Ajax won't let css current link styling work properly

问题描述

这是我有问题的ajax文件。另请参阅我的原始CSS问题：。CSS上的当前链接样式仅适用于第1页，不会转移到其他

This is my problematic ajax file. Please also refer to my original css question here: .Current link styling on CSS only works on the 1st page and doesn't transfer to the other

我如何解决这个Ajax代码，让我开始将我当前的链接样式应用到实际的当前页面？

How can I fix this Ajax code so that starts letting me apply my current link styling to the actual current page?

$("a.ajax-link").live("click", function(){
$this = $(this);
var link = $this.attr('href');
var current_url = $(location).attr('href'); 

if( link != current_url && link != '#' ) { 
    $.ajax({
        url:link,
        processData:true, 
        dataType:'html', 
        success:function(data){
            document.title = $(data).filter('title').text(); 
            current_url = link;
            if (typeof history.pushState != 'undefined') 
                history.pushState(data, 'Page', link);

            setTimeout(function(){                      
                $('#preloader').delay(50).fadeIn(600);
                $('html, body').delay(1000).animate({ scrollTop:  0  },1000);                       

                setTimeout(function(){

                    $('#ajax-content').html($(data).filter('#ajax-content').html());
                    $('#ajax-sidebar').html($(data).filter('#ajax-sidebar').html());

                    $('body').waitForImages({
                        finished: function() {
                            Website();
                            backLoading();
                            $('.opacity-nav').delay(50).fadeOut(600);
                        },                                      
                        waitForAll: true
                    });                             
                },1000);
            },0);
        }
    });
}
return false;
});

推荐答案

我相信你只需要删除当前类从上一个< li class =current> ，需要应用到当前 < a> 标签的父< li> 标签。

I believe you just need to remove the current class from previous <li class = "current"> and need to apply it to current <a> tag's parent <li> tag.

以下列方式完成：

$("a.ajax-link").live("click", function(){
    $this = $(this);
    var link = $this.attr('href');
    var current_url = $(location).attr('href'); 

    if( link != current_url && link != '#' ) { 
        $.ajax({
            url:link,
            processData:true, 
            dataType:'html', 
            success:function(data){

                //code to apply current class to current li

                if($this.parent("div.logo").length == 0){
                    $("li.current").removeClass("current");
                    $this.parent("li").addClass("current");
                }
                //code ends here

                document.title = $(data).filter('title').text(); 
                current_url = link;
                if (typeof history.pushState != 'undefined') 
                    history.pushState(data, 'Page', link);

                setTimeout(function(){                      
                    $('#preloader').delay(50).fadeIn(600);
                    $('html, body').delay(1000).animate({ scrollTop:  0  },1000);                       

                    setTimeout(function(){

                        $('#ajax-content').html($(data).filter('#ajax-content').html());
                        $('#ajax-sidebar').html($(data).filter('#ajax-sidebar').html());

                        $('body').waitForImages({
                            finished: function() {
                                Website();
                                backLoading();
                                $('.opacity-nav').delay(50).fadeOut(600);
                            },                                      
                            waitForAll: true
                        });                             
                    },1000);
                },0);
            }
        });
    }
    return false;
});

这篇关于Ajax不会让css当前链接样式正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！