2012-08-05 14 views
14

Ho un pulsante come immagine ...Javascript inline onclick goto ancoraggio locale

<img src="button.png" /> 

Ho bisogno di un po 'di javascript in un onclick dove quando clic su di esso sarà passare a un ancoraggio locale. Ad esempio:

<img src="button.png" onclick="navigateTo #page10" /> 

Come posso fare questo?

Update: Questo è il codice che sto utilizzando:

onclick="document.location=#goToPage';return false;" 
+0

Hai visto questa risposta? forse aiuta http://stackoverflow.com/questions/8908191/use-jquery-click-to-handle-anchor-onclick – devanand

+0

C'è un motivo non solo di avvolgere l'immagine in un collegamento ipertestuale? –

+0

Sì, il motivo è che sto usando JQuery Mobile che aggiunge automaticamente le classi a Satch3000

risposta

13

sembra il onClick dovrebbe essere:

onclick="document.location+='#goToPage';return false;" 
+4

Vedere la risposta di Tivie sotto. Indica che questa risposta può essere utilizzata solo una volta. Successivamente, aggiunge un altro #tag alla fine dell'URL e non fa nulla. – Dave

3

avvolgerla in un tag di ancoraggio. Non è necessario utilizzare JS.

<a data-role="none" href="#page10"><img src="button.png" /></a> 
+0

Impossibile farlo in questo modo poiché è jquery mobile e quando aggiungo il Satch3000

+0

secondo http://stackoverflow.com/ domande/8959519/è possibile aggiungere 'data-role =" none "' a '' per impedirgli di aggiungere classi extra – foz

+2

Appena ottenuto un downvote su questo tuttavia sembra essere la risposta più appropriata dopo 6 anni. Non sono sicuro del motivo per cui le persone sentono la necessità di complicare questo con JS. Solo perché OP ha richiesto una soluzione JS non significa che gli altri non sono corretti. Più precisamente, vedere il commento di @ foz sul perché il requisito JS non è necessario. –

17

La soluzione presentata nella risposta accettata presenta il problema importante che può essere usato solo 1 volta. Ogni clic consecutivo aggiunge #goToPage alla posizione e la finestra non naviga fino all'ancora.

Una soluzione è quella di rimuovere la parte di ancoraggio prima di aggiungere un nuovo ancoraggio:

function goToAnchor(anchor) { 
    var loc = document.location.toString().split('#')[0]; 
    document.location = loc + '#' + anchor; 
    return false; 
} 

Esempio di utilizzo:

<a href="#anchor" onclick="goToAnchor('anchor')">Anchor</a> 

Si noti che l'ancora deve essere racchiuso tra virgolette, senza il prefisso hash .

+3

Questa dovrebbe essere la risposta accettata. – Dave

+1

La soluzione più cool di sempre! – andresmafra

Problemi correlati