Работа с navbar. active class link
Ребята, привет.
Пытаюсь сделать навигацию, с переключением активного класса, но немного застрял. Не работает переключение при использовании querySelectorAll. Возможно, при чтении материалов что-то упустил, но не пойму почему не срабатывает. Скрипт работает при querySelector, но только на первую ссылку, но мне нужны все. Поэтому этот вариант не подходит. Закомментированный скрипт тоже не годится, так как работает только с jq. Подскажите, что не так со скриптом?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<style>
.navbar-nav {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.nav-link {
position: relative;
margin: 15px;
text-decoration: none;
padding-top: 10px;
padding-bottom: 10px;
}
.nav-link::before,
.nav-link::after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: #d94f5c;
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
-webkit-transition: -webkit-transform 0.2s;
transition: transform 0.2s
}
.nav-link::before {
top: 0;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%
}
.nav-link::after {
bottom: 0;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%
}
.nav-link.active::before,
.nav-link.active::after {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s
}
</style>
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link active" href="#about">о нас</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#testing">испытания</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#reglaments">регламенты</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#map">контакты</a>
</li>
</ul>
<script>
/* jquery
$('.navbar-nav .nav-link').click(function() {
$('.navbar-nav .nav-link').removeClass('active');
$(this).addClass('active');
})
*/
let link = document.querySelectorAll('.nav-link');
link.onclick = function () {
this.classList.toggle('active');
}
</script>
</body>
</html>
|
madeas,
Нужен цикл. |
Цитата:
|
рони,
как нет? а это? И скрипт же работает при querySelector |
madeas,
даже 2 цикла
var link = Array.from(document.querySelectorAll('.nav-link'));
link.forEach(function(it) {
it.onclick = function () {
link.forEach(function(el) {
el.classList.remove('active');
});
this.classList.toggle('active');
}
});
обработчик навешивается на конкретный элемент DOM, querySelector дает конкретный элемент, querySelectorAll - коллекцию элементов jQuery умная - делает циклы скрытно. |
Dilettante_Pro,
может 1 цикл и
var el = document.querySelector('.nav-link.active');
el && el != this && el.classList.remove('active');
this.classList.toggle('active');
|
понял, потренируюсь. Спасибо.
|
рони,
Я что-то не понял - где обработчик кликов для всех элементов .nav-link? Снаружи? И внутри ищется один .active? remove тогда можно и без проверок - все равно потом назначится на нужный Ведь активный при повторном клике по нему же выключать не нужно? |
Цитата:
var link = Array.from(document.querySelectorAll('.nav-link'));
link.forEach(function(it) {
it.onclick = function () {
var el = document.querySelector('.nav-link.active');
el && el != it && el.classList.remove('active');
it.classList.toggle('active');
}
});
|
Вот вроде смотрю на скрипт рони и казалось бы, ничего сложного... а сам бы не составил. Вечером пробовал составить аналог для скрипта копирования содержимого нескольких одноклассовых полей, но он не работает. Подскажите, что упустил?
let copy = Array.from(document.querySelectorAll('.copy'));
copy.forEach(function(teco) {
teco.addEventListener('click',
function(event) {
let text = copy;
text.select();
document.execCommand('copy');
});
});
|
о, составил =) может пригодится кому
let copy = Array.from(document.querySelectorAll('.copy'));
copy.forEach(function(teco) {
teco.onclick = function() {
let text = teco;
text.select();
document.execCommand('copy');
}
});
upd. странно только, в песочнице работает, а на сайте нет |
Работает и на сайте
<input type="text" class="copy" value="Text 1">
<input type="text" class="copy" value="Text 2">
<script>
let copy = Array.from(document.querySelectorAll('.copy'));
copy.forEach(function(teco) {
teco.onclick = function() {
this.select();
document.execCommand('copy');
}
});
</script>
Может, не хватает document.designMode = "on"; здесь и в песочнице оно, очевидно, включено Хотя нет... alert(document.designMode); Тогда непонятно Цитата:
|
Для этих задач вам не нужно что-то перебирать в массиве, как это сделано в примерах выше (и как это делает умный jQuery)...
Вот код решающий обе задачи без сторонних зависимостей
document.addEventListener("click", function(event) {
if(event.target.matches(".nav-link")) {
var active = document.querySelector(".nav-link.active");
active && active.classList.remove("active");
event.target.classList.add("active");
}
if(event.target.matches(".copy")) {
event.target.select();
document.execCommand("copy");
}
});
|
Malleys,
строка 3, а если ещё нет active? |
То его и не будет! В первом посте указано, что оно есть. Однако же можно проверить, найден ли он!
|
Цитата:
|
Цитата:
Array.from(document.querySelectorAll('.copy'), function(teco) {
|
j0hnik,
Это я по складАм, чтобы было понятно... |
| Часовой пояс GMT +3, время: 06:48. |