Подчеркивание CSS не движется по клику

Ответ 1

:active срабатывает только тогда, когда вы удерживаете кнопку мыши на элементе - т.е. когда вы активно нажимаете на элемент.

Вы можете использовать :target вместо :active.

Псевдо-селектор :target в CSS соответствует, когда хэш в URL-адресе и идентификатор элемента совпадают.

Предоставляя значения атрибуту href ссылок и id элементов li, мы можем :target li, на которые было нажато:

* {
  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>

Ответ 2

Он перемещается, пока ваша мышь все еще опускается. Ваша проблема в том, что селектор :active активируется только тогда, когда элемент активен, обычно при нажатии мыши.

Вам нужно добавить класс .active вместо селектора :active. Таким образом, у вас будет:

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

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

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

И добавьте некоторые функции:

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");
  });
} 

Ручка: http://codepen.io/vandervals/pen/wagwBQ

Ответ 3

вот ваше решение для получения активной ссылки, когда меню находится в активном состоянии. Проблема с вашим кодом заключается в том, что... вместо селектора : используйте селектор .. также нужно использовать небольшой javascript.

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

Ответ 4

Попробуйте Fiddle.

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