Изменить CSS при клике на ссылку

Question

Есть сайт на wordpress, можно ли как-то сделать так, чтобы при клике на любую уже существующую или будущую ссылку (внутреннюю или внешнюю) становился видимым определённый div?

#gp-page-loader.gp-remove-loader {
  opacity: 0;
  visibility: hidden;
}

Менялся на

#gp-page-loader.gp-remove-loader {
  opacity: 1;
  visibility: vivsible;
}

Answer 1

const a = document.querySelector('.link');

a.addEventListener('click', () => {
  const div = document.querySelector('div');
  div.classList.add('visible');
});

div {
  opacity: 0;
}

.visible {
  opacity: 1;
}

<a href="#" class="link">Ссылка</a>
<div>Когда-то невидимый блок</div>

Или можно так:

const a = document.querySelector('.link');

a.addEventListener('click', () => {
  try {
    const className = 'invisible';
    const div = document.querySelector(`.${className}`);
    div.classList.remove(className);
  } catch {}
});

.invisible {
  opacity: 0;
}

<a href="#" class="link">Ссылка</a>
<div class="invisible">Когда-то невидимый блок</div>

Вот гораздо более модернизированный вариант. Здесь ссылки с блоками генерируются динамически:

const objOfLinks = {
  link1: {
    content: "Ссылка №1",
    div: {
      content: "Когда-то невидимый блок"
    }
  },
  link2: {
    content: "Ссылка №2",
    div: {
      content: "Когда-то невидимый блок"
    }
  },
  link3: {
    content: "Ссылка №3",
    div: {
      content: "Когда-то невидимый блок"
    }
  }
}

function createBlock(obj, cb) {
  const block = document.createElement('div');
  block.classList.add('block');
  let i = 0;
  for (const elem in obj) {
    i++;
    const a = document.createElement('a');
    a.textContent = obj[elem].content;
    a.dataset.num = i;
    a.classList.add('link');
    a.href = '#';
    const div = cb(obj[elem].div.content, i);
    block.appendChild(a);
    block.appendChild(div);
  }
  document.body.appendChild(block);
}

function createDiv(content, i) {
  const div = document.createElement('div');
  div.classList.add(`div${i}`);
  div.textContent = content;
  return div;
}

createBlock(objOfLinks, createDiv);

document.querySelectorAll('.link').forEach(elem => {
  elem.addEventListener('click', ev => {
    const number = ev.target.dataset.num;
    document.querySelector(`div.div${number}`).classList.add('invisible');
  });
});

.invisible {
  opacity: 0;
}

Answer 2

при клике на любую уже существующую или будущую ссылку (внутреннюю или внешнюю)

Именно так

var link = document.querySelector("a");
var loader = document.getElementsByClassName('gp-remove-loader');
link.addEventListener("click", function(event) {
  //console.log("Добавили");
  loader[0].setAttribute("style", "opacity:1; visibility:visible");
  event.preventDefault();
});

#gp-page-loader .gp-remove-loader {
  width: 50px;
  height: 50px;
  background-color: red;
  opacity: 0;
  visibility: hidden;
}

<a href="#">Ссылка</a><br>
<div id="gp-page-loader">
  <div class="gp-remove-loader"></div>
</div>

БЛОГ НА HUSL

Изменить CSS при клике на ссылку

Ответы (2 шт):