Esiste un metodo alternativo per imitare il comportamento di una pseudo-class Link / Target di ancoraggio?

Post originale:

È ansible per onclick all’interno di un tag chiamare un collegamento di ancoraggio, proprio come fa href ?

Nello snippet seguente, ho applicato a tutte le immagini e come URL di ritorno una volta ogni immagine è chiusa dalla vista lightbox.

Idealmente, preferirei che gli ancoraggi richiedessero dove non avrebbero creato alcun tipo di estensione all’URL della pagina.

Quindi, dopo aver fatto clic su , aggiunge l’URL della pagina in questo modo:

http://ARANDOMURL.com/page#view

E poi una volta chiusa la finestra lightbox, l’URL mostrerà:

http://ARANDOMURL.com/page#!

Quindi devi fare clic sul pulsante Indietro del browser, tuttavia, molte volte in più prima di poter tornare alla pagina precedente effettiva …

Qualche suggerimento su come ottenere questo?

Ultimo aggiornamento (risolto):

Funziona ora, grazie alla risposta di NetMage qui :

 $('.pic > img').click(function() { var srcToCopy = $(this).attr('src'); $('body').find('.imgsrc').attr('src', srcToCopy); $('body').addClass('no-scroll'); $('#view').addClass("target"); }); $('#customlightbox-controls').on('click', function() { $('body').removeClass('no-scroll'); $('#view').removeClass("target"); }); 
 body { margin: 0; padding: 0; border: 0; height: 100%; width: 100%; } body.no-scroll { overflow: hidden; } .pic, #imgsrc { display: inline-block; } img { width: 100px } a { display: inline-block; line-height: 0; } .container { display: block; width: 100%; line-height: 0; } .customlightbox { top: 0%; bottom: 0%; box-sizing: border-box; position: fixed; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); z-index: -5; opacity: 0; } .customlightbox-imgwrap { width: 100%; height: 100%; padding: 20px; box-sizing: border-box; position: relative; text-align: center; } .customlightbox img { width: auto; margin: auto; max-width: 100%; max-height: 100%; opacity: 0; position: relative; top: 50%; transform: translateY(-50%); } #customlightbox-controls { box-sizing: border-box; position: fixed; height: 50px; width: 50px; top: -50px; right: -3px; z-index: 5; border-left: 2px solid white; border-bottom: 2px solid white; opacity: .7; } #close-customlightbox { display: block; position: absolute; overflow: hidden; height: 30px; width: 30px; right: 10px; top: 10px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #close-customlightbox:before { content: ""; display: block; position: absolute; height: 0px; width: 2px; left: 14px; top: 0; background: white; border-radius: 2px; } #close-customlightbox:after { content: ""; display: block; position: absolute; width: 0px; height: 2px; top: 14px; left: 0; background: white; border-radius: 2px; } .customlightbox.target { z-index: 4; opacity: 1; display: inline-block; } .customlightbox.target img { opacity: 1; } .customlightbox.target~#customlightbox-controls { top: -3px; } .customlightbox.target~#customlightbox-controls #close-customlightbox:after { width: 30px; } .customlightbox.target~#customlightbox-controls #close-customlightbox:before { height: 30px; } .lb-animate { -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -ms-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; } 
   

Guardando il tuo campione, sembra che tu stia usando il CSS :target selettore di :target per gestire la visualizzazione e hide la lightbox. Il :target selettore di :target viene applicato all’elemento di destinazione dell’URL corrente, pertanto le modifiche non hanno effetto se non si modifica l’URL.

Invece di modificare l’URL, modifica tutti i selettori di :target nel tuo CSS come selettori .target .

Quindi, nei tuoi gestori di eventi:

 $('.pic > img').click(function() { var srcToCopy = $(this).attr('src'); $('body').find('.imgsrc').attr('src', srcToCopy); $('body').addClass('no-scroll'); $('#view').addClass("target"); }); $('#customlightbox-controls').on('click', function() { $('body').removeClass('no-scroll'); $('#view').removeClass("target"); }); 

Ora, quando si fa clic su un’immagine, la target class di stile CSS viene aggiunta all’elemento #view , che ne fa apparire, e quando si fa clic sulla casella Chiudi, la class di target viene rimossa e scompaiono.

Non hai più bisogno di modificare l’URL o href , quindi puoi rimuovere i tag di ancoraggio per #view e il close onclick per tornare a #! .

Esempio di nuova istanza Lightbox:

  

Cambia per chiudere il controllo lightbox: