На странице есть аудиоплеер с плейлистом, в котором каждый трек - ссылка <a href="..." class="play-item">...</a>
, при нажатии на которую он играет. На странице есть ещё одна ссылка, для перехода на другую страницу, типа <a href="..." class="readmore">Туда</a>
. Я хотел бы запретить нажатие ссылки .readmore
, если не выбран трек в плейлисте, т.е., если не нажата ни одна ссылка .play-item
. Как это сделать средствами js? Спасибо!
-
pointer-events: none пробовали?– Stranger in the Q23 окт 2019 в 6:05
-
@StrangerintheQ боюсь, это будет не кроссбраузерно– Alexashka23 окт 2019 в 6:09
-
откуда такие опасения?– Stranger in the Q23 окт 2019 в 6:11
Добавить комментарий
|
1 ответ
Вот банально простой пример с использованием флагов.Для того чтобы просто понять суть.Если одно из элементов списка не нажато то красную кнопку либо ссылку нажать будет невозможно.
И а
надо заменить на span
ну или любой другой подходящий тег.
const testEl = document.querySelectorAll(".test"),
red = document.getElementById("red"),
link = document.getElementById("link");
let flag = false;
link.onclick = _ => {
flag ? window.location = "https://www.google.ru/" : null;
}
testEl.forEach(el => {
el.onclick = _ => {
flag !== true ? (flag = true , red.innerHTML = "Now clickable") : null;
};
});
red.onclick = _ => {
flag ? red.classList.add("red") : null;
}
.red {
background:red;
}
#link {
color:blue;
text-decoration:underline;
}
<ul>
<li class="test">test 1</li>
<li class="test">test 2</li>
<li class="test">test 3</li>
</ul>
<button id="red">Not clickable</button>
<span id="link">link</span>