2010-07-01 49 views
2

我一直在嘗試一種新方法來設置一個網站,使用jQuery來動態獲取點擊鏈接時的內容。這裏是jQuery代碼:如何在jQuery中引用井號(#)?

$(document).ready(function() { 

var content_loader = $('#content-loader'); 

$('#nav ul li a').click(function() { 
    $(this).closest('ul').find('li.active').removeClass('active'); 
    $(this).parent().addClass('active'); 
    content_loader.load('content/' + $(this).attr('data-name') + '.html'); 
    }); 

content_loader.load('content/home.html'); 

}); 

我一直在做這種方式,因爲我有,我要玩所有的時間和不是每一個鏈接被點擊的時間重新開始我的網站的背景歌曲。

整件事情效果很好,除了我遇到的兩個問題。

  1. 假設我點擊聯繫我們鏈接。我現在會在URL的末尾看到#contactus。如果我然後刷新頁面,我會再次看到我的主頁內容。
  2. 如果我嘗試將某人鏈接到我的聯繫人頁面,則會出現同樣的問題。

我在想,如果jQuery能以某種方式找出在URL中的#號之後發生了什麼。在這種情況下,我可以改變我的jQuery代碼的最後一行來加載,而不是始終加載home數據。

+2

可能的重複:http://stackoverflow.com/questions/298503/how-can-you-check-for-a-hash-in-a-url-using -javascript – Marek 2010-07-01 07:34:54

+1

你在標記中加入了一個無效屬性?..不是gud ..;) – Reigel 2010-07-01 07:36:04

+0

我同意Reigel。嘗試使用.data(),而不是如果你想存儲一些任意數據到一個元素 – ZX12R 2010-07-01 08:00:24

回答

2

window.location.hash將包含哈希後的值(如果有的話)。 (這是當有在當前URL的哈希,如:當前頁面,在瀏覽器的地址欄。)

否則,如果你正在閱讀從一個href的鏈接,你將需要使用indexOf('#')和一些解析。

2

感謝您的答案夥計。這是我現在的做法:

$(document).ready(function() { 

    var content_loader = $('#content-loader'); 

    $('#nav ul li a').click(function() { 
     $(this).closest('ul').find('li.active').removeClass('active'); 
     $(this).parent().addClass('active'); 
     content_loader.load('content/' + $(this).attr('href').slice(1) + '.html'); 
     }); 

    var initial = 'home'; 
    if (window.location.hash) { 
     initial = window.location.hash.slice(1); 
     } 

    $('#nav').find('a[href="#' + initial + '"]').parent('li').addClass('active'); 
    content_loader.load('content/' + initial + '.html'); 

    });