: Ziel funktioniert nicht auf meiner Website

Question

Ich fand cool CSS zum Leuchtkasten erstellen. Es verwendet: Ziel, um Lightbox div. Anzuzeigen Ich habe versucht in Code-Stift und es funktioniert gut, aber auf meiner Website zeigt es nichts. Ich kann nicht finden, was sonst noch in meinem Code das Anzeigen blockiert. Hier ist der Grundcode:

HTML:

<a href="#img2" class="image"> 
    <img src="https://d2d00szk9na1qq.cloudfront.net/Product/2c6b113d-e972-42cc-a2de-f5dcf1c82e95/Images/Large_0297791.jpg"> 
    </a> 

    <a href="#_" class="lightbox" id="img2"> 
    <img src="https://d2d00szk9na1qq.cloudfront.net/Product/2c6b113d-e972-42cc-a2de-f5dcf1c82e95/Images/Large_0297791.jpg"> 
    </a>` 

CSS:

.lightbox { 
display: none; 


position: fixed; 
z-index: 999; 
width: 100%; 
height: 100%; 
text-align: center; 
top: 0; 
left: 0; 
background: rgba(0,0,0,0.8) 
} 
.lightbox img { 
max-width: 90%; 
max-height: 80%; 
margin-top: 2%; 
} 

.lightbox:target { 
outline: none; 
display: block; 
} 

(Codepen: http://codepen.io/anon/pen/jrBrmp)

und hier ist meine Website: http://test.fulfeal.co.uk/how-to/ Vielen Dank im Voraus.

Aleksander

Answer 1

Ihre Seite url wurde weitergeleitet. Zwei Möglichkeiten, um das Problem

1. Sie verwenden wordpress Rahmen für Ihre Website zu lösen, so gehen Sie auf die Wordpress Content Admin-Panel und ändern Sie Ihre url Typ.

ODER

2. am Ende Ihrer Website unter Code hinzufügen.

   <script> 
   $(function(){ 
       $(".image").on("click",function(){ 
       var image = $(this).attr("href"); 
       $(image).show(); 
       }); 
   }); 
   </script> 
   

Answer 2

Etwas in Ihrer Website Installation verhindert, dass die URL ändert, wenn die Hashtag Links angeklickt werden. Der Selektor "Ziel" funktioniert auf dem Hashtag in der URL.

Sie sehen, wenn Sie direkt zu http://test.fulfeal.co.uk/how-to/#img1 navigieren, erscheint das Bild wie erwartet. Es ist also nichts falsch mit Ihrem CSS, das Problem ist mit dem URL-Routing auf Ihrer Website.

Im Codepen ändert sich die URL nicht, weil die Demo-Box am unteren Rand einen eigenen iframe hat und mit dem Link aktualisiert wird.