jquery – Ajax不会让css当前链接样式正常工作

前端之家收集整理的这篇文章主要介绍了jquery – Ajax不会让css当前链接样式正常工作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

这是我有问题的ajax文件.另请参阅我原来的css问题:.Current link styling on CSS only works on the 1st page and doesn’t transfer to the other

如何修复此Ajax代码以便开始让我将当前链接样式应用于实际当前页面

  1. $("a.ajax-link").live("click",function(){
  2. $this = $(this);
  3. var link = $this.attr('href');
  4. var current_url = $(location).attr('href');
  5. if( link != current_url && link != '#' ) {
  6. $.ajax({
  7. url:link,processData:true,dataType:'html',success:function(data){
  8. document.title = $(data).filter('title').text();
  9. current_url = link;
  10. if (typeof history.pushState != 'undefined')
  11. history.pushState(data,'Page',link);
  12. setTimeout(function(){
  13. $('#preloader').delay(50).fadeIn(600);
  14. $('html,body').delay(1000).animate({ scrollTop: 0 },1000);
  15. setTimeout(function(){
  16. $('#ajax-content').html($(data).filter('#ajax-content').html());
  17. $('#ajax-sidebar').html($(data).filter('#ajax-sidebar').html());
  18. $('body').waitForImages({
  19. finished: function() {
  20. Website();
  21. backLoading();
  22. $('.opacity-nav').delay(50).fadeOut(600);
  23. },waitForAll: true
  24. });
  25. },1000);
  26. },0);
  27. }
  28. });
  29. }
  30. return false;
  31. });
最佳答案
我相信你只需要从之前的< li class =“current”>中删除当前的类.并且需要将其应用于当前< a> tag的父级< li>标签.

这可以通过以下方式完成:

  1. $("a.ajax-link").live("click",function(){
  2. $this = $(this);
  3. var link = $this.attr('href');
  4. var current_url = $(location).attr('href');
  5. if( link != current_url && link != '#' ) {
  6. $.ajax({
  7. url:link,success:function(data){
  8. //code to apply current class to current li
  9. if($this.parent("div.logo").length == 0){
  10. $("li.current").removeClass("current");
  11. $this.parent("li").addClass("current");
  12. }
  13. //code ends here
  14. document.title = $(data).filter('title').text();
  15. current_url = link;
  16. if (typeof history.pushState != 'undefined')
  17. history.pushState(data,link);
  18. setTimeout(function(){
  19. $('#preloader').delay(50).fadeIn(600);
  20. $('html,1000);
  21. setTimeout(function(){
  22. $('#ajax-content').html($(data).filter('#ajax-content').html());
  23. $('#ajax-sidebar').html($(data).filter('#ajax-sidebar').html());
  24. $('body').waitForImages({
  25. finished: function() {
  26. Website();
  27. backLoading();
  28. $('.opacity-nav').delay(50).fadeOut(600);
  29. },waitForAll: true
  30. });
  31. },1000);
  32. },0);
  33. }
  34. });
  35. }
  36. return false;
  37. });

猜你在找的CSS相关文章