2017-02-08 3 views
0

Ich habe einige schnelle Links und aus irgendeinem Grund fehlt es Brände der Link wird nicht zum Abschnitt, wenn geklickt.ul link missfire wenn geklickt

<div class="quick-links">  
    <ul id="quick-links"> 
     <li class="section1 active"><a href="#section1"><span>section1</span></a></li> 
     <li class="section2"><a href="#section2"><span>section2</span></a></li> 
     <li class="section3"><a href="#section3"><span>section3</span></a></li>  
    </ul>  
</div> 

http://codepen.io/codiman/pen/YNOoPM

Ich möchte für sie die Kreise klicken, um bezeichneten Abschnitt

+1

Bitte geben Sie alle relevanten Codes in einem [MCVE] in der Frage selbst, nicht auf eine Website eines Drittanbieters. –

+0

das ist mein Code jsfiddle ist eine Website von Drittanbietern und ihre hier täglich hinzugefügt – Case

+0

Es gibt mehrere Dinge mit dieser Aussage falsch. 1. Ihr Code ist auf CodePen, nicht JSFiddle. 2. JSFiddle wird nicht "hier täglich hinzugefügt". Wenn Sie in der Vergangenheit gesehen haben, dass Ihr Code hier kopiert wurde, liegt das daran, dass jemand so nett war, es hier für Sie zu kopieren. Aber das solltest du selbst tun. 3. Der ganze Punkt meines Kommentars ist, dass es nicht auf einer dritten Seite sein sollte. –

Antwort

1

Sie haben Ihre <a> Tag-Einstellung pointer-events: none deaktiviert. Wenn Sie Text auch anklickbare betrachten gibt es einfache Lösung (durch pointer-events: none Entfernen und platzieren Kreis in klickbaren Bereich):

http://codepen.io/themeler/pen/ggBOKr

.quick-links ul li a { 
    display: block; 
    position: absolute; 
    left: auto; 
    right: 0; 
     padding-right: 65px; 
    width: 150px; 
    height: 40px; 
    line-height: 40px; 
    color: #fff; 
    font-size: 14px; 
    font-family: 'Roboto', sans-serif; 
    text-transform: uppercase; 
    opacity: 0; 
} 
0

Click-Ereignis von li als einen Tag eher abgefangen wird.

Ich habe einige Änderungen am Code vorgenommen, ich hoffe, Sie werden es neu gestalten.

<a href="#section1"><ul> 
    <li class=""><span>section1</span></li> 
    </ul></a> 

Demo: https://jsfiddle.net/r0rq6x3y/

1

Sie haben die Eigenschaft Zeiger-Ereignisse auf "none" gesetzt, damit der Tag nicht das Click-Ereignis verfängt.

Verwandte Themen