Question

Добрый вечер.

Подскажите, пожалуйста, как сделать несколько вкладок на одной странице. Чтобы не создавать много страниц, а на одной размещать материал в разных вкладках.

Вот как тут, на этом сайте (пример)

Answer 1

Если вы страницу делаете в редакторе страниц, вам может пригодиться такая конструкция 

<div>Смотреть <span id="line_c">первый</span> контейнер</div>
<div class="s_men"><a href="#" onclick="javascript:h_line=' первый ',SetMode(1)">1 контейнер</a> |
<a href="#" onclick="javascript:h_line=' второй ',SetMode(2)">2 контейнер</a> |
<a href="#" onclick="javascript:h_line=' третий ',SetMode(3)">3 контейнер</a> |
<a href="#" onclick="javascript:h_line=' четвёртый ',SetMode(4)">4 контейнер</a> |
<a href="#" onclick="javascript:h_line=' пятый ',SetMode(5)">5 контейнер</a> |</div>
<script>
var mode=1;
var h_line;
function SetMode(mode)
{
document.all.line_c.innerHTML = h_line;
  document.all.v_cont_01.style.display = (mode==1 ? 'block' : 'none');
  document.all.v_cont_02.style.display = (mode==2 ? 'block' : 'none');
  document.all.v_cont_03.style.display = (mode==3 ? 'block' : 'none');
  document.all.v_cont_04.style.display = (mode==4 ? 'block' : 'none');
  document.all.v_cont_05.style.display = (mode==5 ? 'block' : 'none');
 }
</script>
<div id="v_cont_01" style="display: block;">Содержимое первого контейнера</div>
<div id="v_cont_02" style="display: none;">Содержимое второго контейнера</div>
<div id="v_cont_03" style="display: none;">Содержимое третьего контейнера</div>
<div id="v_cont_04" style="display: none;">Содержимое четвёртого контейнера</div>
<div id="v_cont_05" style="display: none;">Содержимое пятого контейнера</div>

Стили не привожу, это на ваш вкус. Успехов.

Comments

Большое спасибо, хоть 1 человек дал конкретный ответ.

Скажите, пожалуйста, а можно как-то сделать так, чтобы при выборе конкретной вкладки она выделялась? Чтобы было наглядно видно, какой контейнер открыт в данный момент.

---

Катя,

Да, с помощью стилей. По характеру вопроса вижу, что вам нужен детальный ответ. Но, в слепую что-то советовать - не благодарное дело.

Это тоже, что советовать какой макияж навести не видя вас. Но, для примера, с которым вы можете поэксперементировать, пожалуста:

<style>
.w_men {
border: 1px solid #FFCCCC; background-color: #CC0066; font: bold 12px Arial, Helvetica, sans-serif; line-height: 25px; text-align: center; width: 20%; display: inline; text-decoration: none; float: left
}
.w_men a {text-decoration: none; font: bold 12px Arial, Helvetica, sans-serif; width: 100%; background-color: #CC0066; color: #CCFF66
}
.w_men a:link {text-decoration: none; font: bold 12px Arial, Helvetica, sans-serif; width: 100%; background-color: #CC0066; color: #CCFF66
}
.w_men a:hover {text-decoration: none; font: bold 12px Arial, Helvetica, sans-serif; width: 100%; background-color: #FFCCCC; color: #CC0066
}
.w_men a:active {text-decoration: none; font: bold 12px Arial, Helvetica, sans-serif; width: 100%; background-color: #FFCCCC; color: #CC0066
}
 
</style>
<div style="font-family: Tahoma; font-size: 14pt; font-weight: bold; text-align:center;">Смотреть <span id="line_c">первый</span> контейнер</div>
<div class="s_men" style="margin-bottom:0"><span class="w_men"><a href="#" onclick="javascript:h_line=' первый ',SetMode(1)">1 контейнер</a> </span>
<span class="w_men"><a href="#" onclick="javascript:h_line=' второй ',SetMode(2)">2 контейнер</a> </span>
<span class="w_men"><a href="#" onclick="javascript:h_line=' третий ',SetMode(3)">3 контейнер</a> </span>
<span class="w_men"><a href="#" onclick="javascript:h_line=' четвёртый ',SetMode(4)">4 контейнер</a> </span>
<span class="w_men"><a href="#" onclick="javascript:h_line=' пятый ',SetMode(5)">5 контейнер</a> </span></div>
<script>
var mode=1;
var h_line;
function SetMode(mode)
{
document.all.line_c.innerHTML = h_line;
  document.all.v_cont_01.style.display = (mode==1 ? 'block' : 'none');
  document.all.v_cont_02.style.display = (mode==2 ? 'block' : 'none');
  document.all.v_cont_03.style.display = (mode==3 ? 'block' : 'none');
  document.all.v_cont_04.style.display = (mode==4 ? 'block' : 'none');
  document.all.v_cont_05.style.display = (mode==5 ? 'block' : 'none');
  }
</script>
<div id="v_cont_01" style="display: block; background-color: #FFCCCC;">Содержимое первого контейнера</div>
<div id="v_cont_02" style="display: none; background-color: #FFCCCC;">Содержимое второго контейнера</div>
<div id="v_cont_03" style="display: none; background-color: #FFCCCC;">Содержимое третьего контейнера</div>
<div id="v_cont_04" style="display: none; background-color: #FFCCCC;">Содержимое четвёртого контейнера</div>
<div id="v_cont_05" style="display: none; background-color: #FFCCCC;">Содержимое пятого контейнера</div>

 

---

Спасибо за помощь.

А вы могли бы сюда скинуть стили, если вам не сложно? Ведь есть же стили к этому коду, который вы указали?

---

Катя,

Ответ в предыдущем комментарии. Ещё раз 

<style>
.w_men {
border: 1px solid #FFCCCC; background-color: #CC0066; font: bold 12px Arial, Helvetica, sans-serif; line-height: 25px; text-align: center; width: 20%; display: inline; text-decoration: none; float: left
}
.w_men a {text-decoration: none; font: bold 12px Arial, Helvetica, sans-serif; width: 100%; background-color: #CC0066; color: #CCFF66
}
.w_men a:link {text-decoration: none; font: bold 12px Arial, Helvetica, sans-serif; width: 100%; background-color: #CC0066; color: #CCFF66
}
.w_men a:hover {text-decoration: none; font: bold 12px Arial, Helvetica, sans-serif; width: 100%; background-color: #FFCCCC; color: #CC0066
}
.w_men a:active {text-decoration: none; font: bold 12px Arial, Helvetica, sans-serif; width: 100%; background-color: #FFCCCC; color: #CC0066
}
</style>

и ещё в контенте поправил так 

<div id="v_cont_01" style="display: block; background-color: #FFCCCC;">Содержимое первого контейнера</div>
<div id="v_cont_02" style="display: none; background-color: #FFCCCC;">Содержимое второго контейнера</div>
<div id="v_cont_03" style="display: none; background-color: #FFCCCC;">Содержимое третьего контейнера</div>
<div id="v_cont_04" style="display: none; background-color: #FFCCCC;">Содержимое четвёртого контейнера</div>
<div id="v_cont_05" style="display: none; background-color: #FFCCCC;">Содержимое пятого контейнера</div>

 

---

Большое спасибо!

Как сделать ваш ответ лучшим? Не вижу такой кнопки почему-то :(

Answer 2

На том сайте сделано с помощью скрипта, если понимаете в скриптах откройте исходник
 и посмотрите реализацию, если нет, то обратитесь сюда https://upartner.pro/

Comments

Спасибо, конечно, за совет. А есть ли более готовое решение, которое не включает в себя найм сторонних специалистов? Самостоятельное копание в коде плодов не приносит, не шибко в этом разбираюсь..

---

Катя,

Гугляндекс в помощь, но лучше к специалистам, тут выбираем либо вирус, либо чистый сайт.