Вход | Регистрация | FAQ
Anonymous

Как сделать блок скрывающимся при выборе вкладки в табах?

+ Ответить

Сообщений: 2 Страница 1 из 1


Как сделать блок скрывающимся при выборе вкладки в табах?

aap1998 » Пт апр 04, 2014 3:53 pm

Нужно чтобы при нажатии другие блоки убирались, а не перекрывались. БЕЗ скриптов.


/* css таба */

.tabs {
position: relative;
min-height: 350px;
font-family: calibri;
color: #404C59;

}
.tab {
float: left;
}
.tab label {
background:#ccc;
margin-left: -1px;
position: relative;
left: 1px; padding: 10px; background-color: #E6E6E6;
}
.tab [type=radio] {
display: none;

}
.content {
position: absolute;
left: 0;
background: #FAFAFA;
right: 0;
margin-top: 10px;
padding:10px;
}
[type=radio]:checked ~ label {
background: #FAFAFA;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}

.tg {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-s6z2{text-align:center}
.tg .tg-j1h2{font-size:x-large;font-family:"Lucida Console", Monaco, monospace !important;;text-align:center}
.tg .tg-a0td{font-size:100%}
.tg .tg-mysd{font-size:18px;font-family:"Lucida Console", Monaco, monospace !important;;text-align:center}
.tg .tg-g8f1{font-size:100%;text-align:center}

.tg {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-s6z2{text-align:center}
.tg .tg-y5uk{font-weight:bold;font-style:italic;font-size:large;text-align:center}
.tg .tg-xloo{font-weight:bold;font-style:italic;font-size:medium;background-color:#f2cf44;text-align:center}


<!-- HTML -->

<html>
<body>
<div class="tabs">

<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Полиграфия</label>

<div class="content">
<p>
<table class="tg" style="table-layout: fixed; width: 299px; float:left; ">
<colgroup>
<col style="width: 145px">
<col style="width: 49px">
<col style="width: 54px">
<col style="width: 51px">
</colgroup>
<tr>
<th class="tg-mysd" rowspan="2">ТИП ПРОДУКЦИИ</th>
<th class="tg-j1h2" colspan="3">ЦЕНА</th>
</tr>
<tr>
<td class="tg-g8f1">USD</td>
<td class="tg-g8f1">RUB</td>
<td class="tg-a0td">UAH</td>
</tr>
<tr>
<td class="tg-031e">Билборд</td>
<td class="tg-s6z2">100</td>
<td class="tg-s6z2">3500</td>
<td class="tg-s6z2">1200</td>
</tr>
<tr>
<td class="tg-031e">Буклет</td>
<td class="tg-s6z2">40</td>
<td class="tg-s6z2">1400</td>
<td class="tg-s6z2">480</td>
</tr>
<tr>
<td class="tg-031e">Флаер</td>
<td class="tg-s6z2">30</td>
<td class="tg-s6z2">1050</td>
<td class="tg-s6z2">360</td>
</tr>
<tr>
<td class="tg-031e">Дисконт карты</td>
<td class="tg-s6z2">30</td>
<td class="tg-s6z2">1050</td>
<td class="tg-s6z2">360</td>
</tr>
<tr>
<td class="tg-031e">Визитки</td>
<td class="tg-s6z2">5</td>
<td class="tg-s6z2">175</td>
<td class="tg-s6z2"></td>
</tr>
</table>
</p>
</div>
</div>

<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Закладка №2</label>

<div class="content">
<p>

</p>

<img src="http://placekitten.com/200/100">
</div>
</div>

<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Закладка №3</label>

<div class="content">
<p>Содержание закладки №3</p>

<img src="http://placedog.com/200/100">
</div>
</div>

<div class="tab">
<input type="radio" id="tab-4" name="tab-group-1">
<label for="tab-4">Закладка №4</label>
<div class="content">
<p>Содержание закладки №4</p>

<img src="http://placedog.com/200/100">
</div>
</div>
</div>
</body>
</html>
Аватара пользователя

aap1998

  • Сообщения: 1
  • Зарегистрирован: Пт апр 04, 2014 3:45 pm

Re: Как сделать блок скрывающимся при выборе вкладки в табах

XainPro » Сб апр 05, 2014 7:41 am

установить дисплей вкладку никому на мыши вне
Аватара пользователя

XainPro

  • Сообщения: 3933
  • Зарегистрирован: Пт фев 17, 2012 8:10 pm


+ Ответить

Страница 1 из 1