2016-04-13 4 views
-2

Ich erstelle eine Website mit jQuery $.ajax, sobald ich auf ein Menüsymbol klicke, öffnet sich ein Overlay und zeigt den angeforderten Inhalt basierend auf dem Attribut href an. Wenn ich dies tue, ändert sich die URL der Site zu dem Link, auf den Sie klicken. Wenn Sie beispielsweise auf "Über" klicken, lautet die URL http://example.com/#about.URL während eines Anrufs mit AJAX nicht ändern

Ich möchte dies nicht, denn wenn Sie das Overlay schließen, bleibt die Site wie http://example.com/#about, und wenn Sie die Website auf diese Weise eingeben, wird die Info-Seite nicht geöffnet, nicht einmal das Overlay wird geöffnet. Ich frage mich, ob es eine Möglichkeit gibt, die URL nicht zu ändern und ist immer http://example.com.

Hier ist meine aktuellen jQuery-Code:

$(function() { 
    $('.w-container .w-nav-menu a').click(function() { 
     var $linkClicked = $(this).attr('href'); 
     document.location.hash = $linkClicked; 
     var $pageRoot = $linkClicked.replace('#', ''); 
     if (!$(this).hasClass("active")) { 
      $(".w-container .w-nav-menu a").removeClass("active"); 
      $(this).addClass("active"); 
      $.ajax({ 
       type: "POST", 
       url: "load.php", 
       data: 'page='+$pageRoot, 
       dataType: "html", 
       success: function(msg){ 
        if((msg)) 
        { 
         $('.content').html(msg); 
         $('.content').hide().fadeIn(); 
        } 
       } 
      }); 
     } 
    else { 
     event.preventDefault(); 
    } 
}); 

var hash = window.location.hash; 
hash = hash.replace(/^#/, ''); 
switch (hash) { 
    case 'products' : 
     $("#" + hash + "-link").trigger("click"); 
     break;  
    case 'about' : 
     $("#" + hash + "-link").trigger("click"); 
     break; 
    case 'storelocator' : 
     $("#" + hash + "-link").trigger("click"); 
     break; 
    case 'media' : 
     $("#" + hash + "-link").trigger("click"); 
     break; 
    case 'faq' : 
     $("#" + hash + "-link").trigger("click"); 
     break; 
    case 'contact' : 
     $("#" + hash + "-link").trigger("click"); 
     break; 
    } 
}); 

Antwort

5

Verschieben event.preventDefault(); außerhalb der else Block.

Entfernen Sie auch die document.location.hash = $linkClicked; Linie.

$(function() { 
    $('.w-container .w-nav-menu a').click(function() { 
     var $linkClicked = $(this).attr('href'); 
     var $pageRoot = $linkClicked.replace('#', ''); 
     if (!$(this).hasClass("active")) { 
      $(".w-container .w-nav-menu a").removeClass("active"); 
      $(this).addClass("active"); 
      $.ajax({ 
       type: "POST", 
       url: "load.php", 
       data: 'page='+$pageRoot, 
       dataType: "html", 
       success: function(msg){ 
        if((msg)) 
        { 
         $('.content').html(msg); 
         $('.content').hide().fadeIn(); 
        } 
       } 
      }); 
     } 
    event.preventDefault(); 
}); 

var hash = window.location.hash; 
hash = hash.replace(/^#/, ''); 
switch (hash) { 
    case 'products' : 
     $("#" + hash + "-link").trigger("click"); 
     break;  
    case 'about' : 
     $("#" + hash + "-link").trigger("click"); 
     break; 
    case 'storelocator' : 
     $("#" + hash + "-link").trigger("click"); 
     break; 
    case 'media' : 
     $("#" + hash + "-link").trigger("click"); 
     break; 
    case 'faq' : 
     $("#" + hash + "-link").trigger("click"); 
     break; 
    case 'contact' : 
     $("#" + hash + "-link").trigger("click"); 
     break; 
    } 
}); 
1

Verwenden e.preventDefault(); entfernen alle Hash-Änderungscode

$('.w-container .w-nav-menu a').click(function(e) { 
e.preventDefault(); 
1

document.location.hash = $linkClicked; diese Linie Ihre URL Änderung macht auch preventDefault() benutzen Sie den Link klicken, um zu stoppen die von wechselnden URL der Seite

Verwandte Themen