Кликать на ссылки и открывать их на той же страннице?

Question

Как написать только с помощью html5 3 ссылки (Страна 1, Cтрана 2, Страна 3) и один блок .info-counfry. Где при клике на страну будет показываться информация о ней в блоке .info-counfry

(НЕ Якоря!)

<ul>
  <li>
  <a href="#ukraine">Україна</a>
  </li>
  <li>
    <a href="#gr">Грузія</a>
  </li>
  <li>
    <a href="#pl">Польща</a>
  </li>
</ul>

<a name="ukraine">ukraine</a>
<a name="gr">Грузія Грузія</a>
<a name="pl">Польща Польща Польща</a>

Answer 1

Вот можно на input-ах сделать.

.radio-link {
  display: none;
}

.link {
  display: none;
}

.radio-label {
  text-decoration: underline;
  cursor: pointer;
}

.radio-label:hover {
  color: tomato;
}

#radio-link1:checked ~ .link-uk,
#radio-link2:checked ~ .link-gr,
#radio-link3:checked ~ .link-pl {
  display: inline-block;
}

<ul>
  <li>
    <label class="radio-label" for="radio-link1">Україна</label>
  </li>
  <li>
    <label class="radio-label" for="radio-link2">Грузія</label>
  </li>
  <li>
    <label class="radio-label" for="radio-link3">Польща</label>
  </li>
</ul>

<input type="radio" class="radio-link" id="radio-link1" name="link">
<input type="radio" class="radio-link" id="radio-link2" name="link">
<input type="radio" class="radio-link" id="radio-link3" name="link">
<a class="link link-uk" name="ukraine">ukraine</a>
<a class="link link-gr" name="gr">Грузія Грузія</a>
<a class="link link-pl" name="pl">Польща Польща Польща</a>

Answer 2

Примерно так на ссылках.

.country {
  display: none;
}

.country:target {
  display: block;
}

<ul>
  <li>
    <a href="#uk">Україна</a>
  </li>
  <li>
    <a href="#gr">Грузія</a>
  </li>
  <li>
    <a href="#pl">Польща</a>
  </li>
</ul>

<p class="country" name="uk" id="uk">ukraine</p>
<p class="country" name="gr" id="gr">Грузія Грузія</p>
<p class="country" name="pl" id="pl">Польща Польща Польща</p>

БЛОГ НА HUSL

Кликать на ссылки и открывать их на той же страннице?

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