CSS-Unterstreichung bewegt sich nicht Klick

Question

Ich versuche, beim Klicken von Hyperlinks gleitende horizontale Linie zu erstellen. Weitere Informationen finden sie unter: http://codepen.io/anon/pen/JdEPPb

Der HTML ist:

* { 
 
     box-sizing: border-box; 
 
    } 
 
    
 
    body { 
 
     font: 300 100% 'Helvetica Neue', Helvetica, Arial; 
 
    } 
 
    
 
    .container { 
 
     width: 50%; 
 
     margin: 0 auto; 
 
    } 
 
    
 
    ul li { 
 
     display: inline; 
 
     text-align: center; 
 
    } 
 
    
 
    a { 
 
     display: inline-block; 
 
     width: 25%; 
 
     padding: .75rem 0; 
 
     text-decoration: none; 
 
     color: #333; 
 
    } 
 
    
 
    .one:active ~ hr { 
 
     margin-left: 0%; 
 
    } 
 
    .two:active ~ hr { 
 
     margin-left: 25%; 
 
    } 
 
    
 
    .three:active ~ hr { 
 
     margin-left: 50%; 
 
    } 
 
    
 
    .four:active ~ hr { 
 
     margin-left: 75%; 
 
    } 
 
    
 
    hr { 
 
     height: .25rem; 
 
     width: 25%; 
 
     margin: 0; 
 
     background: tomato; 
 
     border: none; 
 
     transition: 0.3s ease-in-out; 
 
    }

<div class="container"> 
 
     <ul> 
 
     <li class="one"><a href="#">Uno</a></li><!-- 
 
    --><li class="two"><a href="#">Dos</a></li><!-- 
 
    --><li class="three"><a href="#">Tres</a></li><!-- 
 
    --><li class="four"><a href="#">Quatro</a></li> 
 
     <hr /> 
 
     </ul> 
 
    </div>

Es gibt keine Javascript-Code.

Wenn ich auf Zwei klicke, möchte ich, dass sich die Unterstreichung unter Zwei verschiebt, aber zur Zeit bewegt es sich nicht. Ich muss länger halten, damit es sich bewegt, und wenn ich die linke Maustaste loslasse, fällt es wieder auf One

Answer 1

:active nur Feuer, während Sie gedrückt halten die Maustaste auf dem Element - also während du aktiv cl bist auf das Element klicken.

Sie können :target anstelle von :active verwenden.

Der Pseudo-Selektor :target in CSS stimmt überein, wenn der Hash in der URL und die ID eines Elements identisch sind.

von Werten an die href Attribut der Links und id s der li Elemente geben können wir die li:target, die auf geklickt wurde:

* { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    font: 300 100% 'Helvetica Neue', Helvetica, Arial; 
 
} 
 

 
.container { 
 
    width: 50%; 
 
    margin: 0 auto; 
 
} 
 

 
ul li { 
 
    display: inline; 
 
    text-align: center; 
 
} 
 

 
a { 
 
    display: inline-block; 
 
    width: 25%; 
 
    padding: .75rem 0; 
 
    text-decoration: none; 
 
    color: #333; 
 
} 
 

 
#uno:target ~ hr { 
 
    margin-left: 0%; 
 
} 
 
#dos:target ~ hr { 
 
    margin-left: 25%; 
 
} 
 

 
#tres:target ~ hr { 
 
    margin-left: 50%; 
 
} 
 

 
#quatro:target ~ hr { 
 
    margin-left: 75%; 
 
} 
 

 
hr { 
 
    height: .25rem; 
 
    width: 25%; 
 
    margin: 0; 
 
    background: tomato; 
 
    border: none; 
 
    transition: 0.3s ease-in-out; 
 
}

<div class="container"> 
 
    <ul> 
 
    <li class="one" id="uno"><a href="#uno">Uno</a></li><!-- 
 
--><li class="two" id="dos"><a href="#dos">Dos</a></li><!-- 
 
--><li class="three" id="tres"><a href="#tres">Tres</a></li><!-- 
 
--><li class="four" id="quatro"><a href="#quatro">Quatro</a></li> 
 
    <hr /> 
 
    </ul> 
 
</div>

Answer 2

Es bewegt sich, während Ihre Maus immer noch unten ist. Ihr Problem ist, dass :active Selektor nur aktiviert wird, während das Element aktiv ist, typischerweise wenn die Maus gedrückt wird.

Sie müssen die Klasse .active anstelle des :active Selektors hinzufügen. So müssten Sie:

.one.active ~ hr { 
    margin-left: 0%; 
} 
.two.active ~ hr { 
    margin-left: 25%; 
} 

.three.active ~ hr { 
    margin-left: 50%; 
} 

.four.active ~ hr { 
    margin-left: 75%; 
} 

Und einige Funktionen hinzufügen:

var elems = document.querySelectorAll(".one,.two,.three,.four"); 
for (var i = 0; i < elems.length; i++) { 
    elems[i].addEventListener("click",function(e){ 
    if(document.querySelector(".active")){ 
     document.querySelector(".active").classList.remove("active"); 
    } 
    e.currentTarget.classList.add("active"); 
    }); 
} 

Ein Stift: http://codepen.io/vandervals/pen/wagwBQ

Answer 3

testen Fiddle.

$('ul li').on('click', function() { 
    $('li').removeClass('active') 
    $(this).addClass('active') 
}) 

Answer 4

hier ist Ihre Lösung aktive Verbindung erhalten, wenn das Menü aktiv ist. Problem mit Ihrem Code ist das ... Sie haben : Selektor verwenden stattdessen . Selektor. müssen auch kleine Javascript verwenden.

http://codepen.io/anon/pen/GJrKjB