<style>
.mytt {background:red; width:100%; height: 100px;line-height:100px;}
</style>
<div class="mytt">лол</div>
его код
<style> .mytt {background:red; width:100%; height: 100px;line-height:100px;} </style> <div class="mytt">лол</div>
<style>
.korpus > div, .korpus > input { display: none; }
.korpus label { padding: 5px; border: 1px solid #aaa; line-height: 28px; cursor: pointer; position: relative; bottom: 1px; background: #fff; }
.korpus input[type="radio"]:checked + label { border-bottom: 2px solid #fff; }
.korpus > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.korpus > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.korpus > input:nth-of-type(3):checked ~ div:nth-of-type(3) { display: block; padding: 5px; border: 1px solid #aaa; }
</style>
<div class="korpus">
<input type="radio" name="odin" checked="checked" id="vkl1"/><label for="vkl1">Слайд 1</label><input type="radio" name="odin" id="vkl2"/><label for="vkl2">Слайд 2</label><input type="radio" name="odin" id="vkl3"/><label for="vkl3">Слайд 3</label>
<div>первая вкладка</div>
<div>вторая вкладка</div>
<div>третья вкладка</div>
</div>
и его код
<style> .korpus > div, .korpus > input { display: none; } .korpus label { padding: 5px; border: 1px solid #aaa; line-height: 28px; cursor: pointer; position: relative; bottom: 1px; background: #fff; } .korpus input[type="radio"]:checked + label { border-bottom: 2px solid #fff; } .korpus > input:nth-of-type(1):checked ~ div:nth-of-type(1), .korpus > input:nth-of-type(2):checked ~ div:nth-of-type(2), .korpus > input:nth-of-type(3):checked ~ div:nth-of-type(3) { display: block; padding: 5px; border: 1px solid #aaa; } </style> <div class="korpus"> <input type="radio" name="odin" checked="checked" id="vkl1"/><label for="vkl1">Слайд 1</label><input type="radio" name="odin" id="vkl2"/><label for="vkl2">Слайд 2</label><input type="radio" name="odin" id="vkl3"/><label for="vkl3">Слайд 3</label> <div>первая вкладка</div> <div>вторая вкладка</div> <div>третья вкладка</div> </div>