Come riferimento cancelletto (#) in jQuery?
Domanda
Ho cercato un nuovo modo di creare un sito web utilizzando jQuery per ottenere dinamicamente il contenuto quando un link viene cliccato. Ecco il codice 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');
});
ho fatto in questo modo dal momento che ho una canzone in sottofondo del mio sito che voglio giocare tutto il tempo e non ricominciare da capo ogni volta che un link viene cliccato.
Il tutto funziona abbastanza bene, tranne che per 2 problemi che sto avendo.
- Diciamo che clicco sul CONTATTI LINK. Vorrei ora vedere #contactus alla fine dell'URL. Se io quindi aggiornare la pagina, rivedo i miei contenuti home page.
- Stesso problema se provo collega qualcuno alla mia pagina contatti.
Mi chiedevo se jQuery può in qualche modo scoprire che cosa viene dopo il simbolo # nell'URL. In tal caso, posso cambiare l'ultima riga del mio codice jQuery per il carico che al posto dei dati casa tutto il tempo.
Soluzione
window.location.hash
conterrà il valore dopo l'hash (se ce n'è uno). (questo è quando c'è un hash nell'URL corrente, ad es. La pagina corrente, nella barra degli indirizzi del browser.)
In caso contrario, se stai leggendo un link da un href, è necessario utilizzare indexOf('#')
e un po 'di analisi.
Altri suggerimenti
Grazie per le vostre risposte ragazzi. Ecco come ho fatto ora:
$(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');
});