0

Есть меню:

<a href="#link1">div1</a>
<a href="#link2">div2</a>
<a href="#link3">div3</a>

Есть, соответственно, 3 div'а одинакового размера, но с различным содержанием.
Как реализовать смену этих блоков по нажатию на ссылки? Под сменой понимаю сокрытие двух ненужных и отображение одного, нужного блока (по ссылке div1 изменить значение display блоков 2 и 3 на none, а блока 1 на table, например).

Спасибо.

1
  • Что Вы подразумеваете под сменой блоков? Один становится видимым другой нет? Будет ещё лучше, если Вы более развёрнуто опишите проблему и выложите больше кода.
    – Streletz
    Commented 15 мая 2016 в 12:13

1 ответ 1

2

Ответ тут.

Как вариант:

#tab2, #tab3 {position: fixed; }

.menu1 > a,
.menu1 #tab2:target ~ a:nth-of-type(1),
.menu1 #tab3:target ~ a:nth-of-type(1),
.menu1 > div { padding: 5px; border: 1px solid #aaa; }

.menu1 > a { line-height: 28px; background: #fff; text-decoration: none; }

#tab2,
#tab3,
.menu1 > div,
.menu1 #tab2:target ~ div:nth-of-type(1),
.menu1 #tab3:target ~ div:nth-of-type(1) {display: none; }

.menu1 > div:nth-of-type(1),
.menu1 #tab2:target ~ div:nth-of-type(2),
.menu1 #tab3:target ~ div:nth-of-type(3) { display: block; }

.menu1 > a:nth-of-type(1),
.menu1 #tab2:target ~ a:nth-of-type(2),
.menu1 #tab3:target ~ a:nth-of-type(3) { border-bottom: 2px solid #fff; }
<div class="menu1">
  <br id="tab2"/><br id="tab3"/>
  <a href="#tab1">div1</a>
  <a href="#tab2">div2</a>
  <a href="#tab3">div3</a>
  <div>вкладка 1</div>
  <div>вкладка 2</div>
  <div>вкладка 3</div>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.