Форма с вкладками без подключения библиотек.

Раннее было опубликовано, как сделать меню с вкладками для боковой панели. Теперь посмотрим скрипт создания формы с возможностью включения её в тело сообщения. Здесь не нужно использовать внешние библиотеки, код минимален.

HTMLCSSскрипт
<div class="korpus">
<a onclick="vkladki('HTML',this);" href="javascript:void(0);" id="vkladka1">HTML</a>
<a onclick="vkladki('CSS',this);" href="javascript:void(0);">CSS</a>
<a onclick="vkladki('script',this);" href="javascript:void(0);">скрипт</a>
<div id="HTML" class="vid">1</div>
<div id="CSS" class="skryt">2</div>
<div id="script" class="skryt">3</div>
</div>
<style type="text/css">
.korpus > a {
  background: #FFF;
  padding: 2px 5px;
  border: 1px solid #e1e1e1;
  line-height: 20px;
}

.korpus > a:first-child { border-bottom: 1px solid #fff; }

.korpus > a:hover { text-decoration: none; }

.korpus div {
  border: 1px solid #e1e1e1;
  padding: 5px;
  width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
  background: #FFF;
}

.korpus .vid { display: block; }
.korpus .skryt { display: none; }
</style>
<script type="text/javascript"> //<![CDATA[
 var abv = "HTML";
 function vkladki(x,y) {
 var mostrar = document.getElementById(x);
 var actual = document.getElementById(abv);
 if(mostrar==actual) {return false;}
 actual.className="skryt";
 mostrar.className="vid";
 abv = x;
 document.getElementById('vkladka1').style.borderBottomColor='#e1e1e1';
 if (self.ramka) ramka.style.borderBottomColor = '#e1e1e1';
 y.style.borderBottomColor = '#fff'; ramka = y;
}
//]]> </script>



Похожие материалы:
в f t
наверх ↑

9 комментариев:

PANIC
Большое Вам СПАСИБО!
только у меня блок сдвинут вправо и уходит за границу поля сообщений, т.к. большой. В каком месте подправить, чтобы он к левому краю был ближе?
PANIC
вопрос снят - удалила width: 450px; в div.TabView
еще раз спасибо :)
NMitra
Хорошо, что получилось.
Анонимный
Уважаемые у меня такая проблема, хочу сделать четвертую закладку, почти все получилось но у четвертой закладки нет такого же оформления что и у трех первых. Она показана как простая ссылка в виде текста с подчеркиванием. Что делать, люди спасите!!!
Анонимный
а нет, все, проблема решена)))
NMitra
Отлично!)
Админ
Здравствуйте. У меня возникла проблема, почему то вкладки расположились вертикально в ряд подскажите чего нетак?
NMitra
Здравствуйте. Уберите все пробелы (особенно переводы ссылок на новую строку) с вкладки "HTML" в примере выше - Blogger автоматом ставит /br.
shpura.com.ua
Большое спасибо за скрипт, работает в IE и Хроме, реализовано - http://www.shpura.com.ua/index.php?y=ot&ot=hr