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>
<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>
.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>
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>
Похожие материалы:
9 комментариев:
только у меня блок сдвинут вправо и уходит за границу поля сообщений, т.к. большой. В каком месте подправить, чтобы он к левому краю был ближе?
еще раз спасибо :)