2012-08-10 16 views
5

Quindi dalla home page, ho un collegamento che va a una pagina di elenco dei prodotti. La pagina prodotto ha espansioni/collaudi div.jQuery se url hash, fare clic su evento/attivare javascript

Ho bisogno del div appropriato per espandere a seconda di quale sia l'url #.

Così il link sulla home page è

<a href="/out-products.php#healthysnacks">healthy snacks</a> 

quando clicco sul link qui sopra, sto cercando di attivare questa, sulla pagina del prodotto:

<a href="javascript:ReverseDisplay('products4')" id="healthysnacks"> Healthy Snacks</a> 

ho provato un po 'di gli altri codici che ho trovato quel clic sul trigger controllando il tag hash e nessuno di essi funzionava correttamente, penso sia dovuto al ReverseDisplay js. Per favore qualsiasi suggerimento sarebbe d'aiuto.

grazie

risposta

6

È possibile apportare le seguenti modifiche nella funzione di pronto documento di la tua pagina del prodotto:

soluzione semplice: Dal momento che la jQuery id-selettore è #elementId, si può semplicemente utilizzare il valore window.location.hash come selettore id, e utilizzarlo per indirizzare l'elemento desiderato.

if (window.location.hash) { 
    $(window.location.hash).click(); //clicks on element specified by hash 
} 

Meglio: In aggiunta a quanto sopra, prendere le js dal vostro markup.

$('#healthysnacks').click(function(e) { 
    e.preventDefault(); 
    ReverseDisplay('products4'); 
}); 

Poi, dopo aver fatto questo , utilizzare il codice $(window.location.hash).click() dall'alto. Inoltre, cambiare il tuo link a:

<a href="#" id="healthysnacks"> Healthy Snacks</a> 
+0

@raminson 'window.location.hash' fornisce una stringa, in questo caso contenente' #healthysnacks 'quindi funziona come un selettore di ID. Probabilmente dovrei chiarire che nel post però, grazie – nbrooks

+0

Sì, hai ragione, mi ero dimenticato che la proprietà hash restituisce anche il segno #. – undefined

+0

non funziona: \ –

3

È possibile utilizzare la proprietà hash dell'oggetto Location, provare quanto segue:

$(document).ready(function(){ 
    var id = window.location.hash; 
    $(id).trigger('click') 
}) 

Come si utilizza jQuery invece di utilizzare javascript: protocollo, è possibile utilizzare il metodo di jQuery click:

$('#healthysnacks').click(function() { 
    // do something here 
}) 
+1

+1 anche a te, stessa idea lol – nbrooks

+0

bella soluzione, funziona perfettamente per il mio setup. Ci sono probabili falle di sicurezza associate a questo?da qualche altra parte ho visto un po 'di sanitizzazione regex per questo tipo di utilizzo .. – cukabeka

3

Le risposte suggerite qui sono validi, ma ...

Fare molta attenzione quando si utilizza il window.location.hash come è in un selettore jQuery perché questo potrebbe portare a una vulnerabilità XSS. $() può anche creare un elemento HTML e con un valore hash attentamente costruito, qualcuno potrebbe eseguire codice JavaScript arbitrario.

Ad esempio

http://my-website.com/about#'><img src=x onerror=alert(/XSSed/)>

Se pagina my-websites.com/about utilizza il window.location.hash all'interno di un selettore jQuery, che onerror codice sarebbe finiscono per essere eseguita.

Problemi correlati