Comment faire référence signe dièse (#) dans jQuery?
Question
Je l'ai essayé une nouvelle façon de mettre en place un site Web en utilisant jQuery pour obtenir dynamiquement le contenu quand un lien est cliqué. Voici le code 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');
});
Je l'ai fait de cette façon depuis que j'ai une chanson en arrière-plan de mon site que je veux jouer tout le temps et ne pas recommencer à chaque fois qu'un lien est cliqué.
L'ensemble fonctionne assez bien, sauf pour les 2 questions que je vais avoir.
- Disons que je clique sur le lien Contactez-nous. Je voudrais maintenant voir #contactus à la fin de l'URL. Si je puis actualisez la page, je vois encore mon contenu de la page d'accueil.
- Même problème si j'essaie lier quelqu'un à ma page contactez-nous.
Je me demandais si jQuery peut en quelque sorte savoir ce qui vient après le signe # dans l'URL. Dans ce cas, je peux changer la dernière ligne de mon code jQuery à la charge qu'au lieu des données à la maison tout le temps.
La solution
window.location.hash
contiendra la valeur après le hachage (s'il y en a un). (Ceci est quand il y a un hachage dans l'URL en cours, par exemple la page en cours., Dans la barre d'adresse du navigateur.)
Dans le cas contraire, si vous lisez un lien à partir d'un href, vous aurez besoin d'utiliser indexOf('#')
et un peu d'analyse syntaxique.
Autres conseils
Merci pour vos réponses les gars. Voici comment je l'ai fait maintenant:
$(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');
});