Sistema di tag maniglia hash per i contenuti scheda? (! #)

Question

Ho quattro pagine sulla parte principale del sito web cui sto lavorando, con schede per passare da uno all'altro. Voglio la commutazione tra le 4 linguette di essere una transizione dissolvenza (usando jQuery). Questo è tutto bene e dandy, ma voglio anche SEO per pensare a ciascuno come una pagina separata. Voglio anche essere in grado di collegamento a un URL e per poter tirare sul contenuto giusto, anche se è tecnicamente la stessa pagina.

Facebook fa questo (facebook.com/#!/another-string-here), ed è possibile passare tra le immagini e così via, in modo che tipo di atti come un querystring javascript.

Consente di passare immediatamente, la capacità di link ad esso, e tuttavia ogni agisce come una propria pagina.

Esiste un metodo consigliato per come fare questo?

---

UPDATE il migliore che ho trovato è SammyJS - non hanno attuato, ma sembra essere la risposta migliore: http://sammyjs.org/

Answer 1

esempio di farvi avere una pagina di base, chiamato services, e quella pagina ha due schede: design e development (solo per la semplificazione). Così, se il dominio è stato example.com, l'URL hash su clic sulla scheda "Design" sarebbe simile http://example.com/services#!/design, e simili per lo sviluppo. Sto assumendo si sa come fare.

Per rendere i motori di ricerca riconoscono le schede, quello che fai è fare una versione statica di ogni pagina . Così si avrebbe uno a http://example.com/services/design e uno a http://example.com/services/development. L'attributo href di ogni scheda sarebbe effettivamente puntare a queste pagine statiche, ma si sarebbe collegare un gestore onclick per ogni scheda per farlo andare alla versione hash.

In questo modo, JavaScript abilitati per i clienti otterrebbero la versione Ajaxy della pagina con i tag hash e gli effetti di dissolvenza, mentre i clienti senza JavaScript abilitati (comprese le web crawler) vedrebbe normali, link statici, e vince tutti.

---

Per la cronaca, questo è simile a quello che fa Facebook. Vanno un ulteriore passo avanti e utilizzare di nuovo HTML5 history.pushState() la funzione nei browser che lo supportano, al fine di eliminare la necessità per il tag hash del tutto. (Vedere questo domanda per ulteriori informazioni.)

Answer 2

bene per avere entrambe le cose è impossibile (metodo facebook e SEO), perché il server non viene inviato il tag hash, e la maggior parte dei motori di ricerca (Google, ecc) non eseguire javascript.

Ora, se volete semplicemente l'effetto di dissolvenza, è possibile impostarlo in modo che se c'è un tag hash nell'URL, ad esempio #fade, jquery imposterà l'opacità a 0, attesa per il carico e fade in. Per ottenere il fade out si imposta listener di eventi sul link, e.preventDefault() o return false in quella funzione, e fade out l'opacità. Una volta che si è fatto dissolvenza si dovrebbe cambiare javascript per una nuova pagina con l'location.href="site" #fade hash

Edit: Esempio: http://fiddle.jshell.net/msm595 / u5Eg2 / 3 / mostra / luce /