INT 21h

Hi, I am Vladimir Smagin, SysAdmin and

Kaptain. Telegram Email / GIT / Thingiverse / RSS / GPG

Мои табы на CSS + Javascript

№ 1451 В разделе "Programming" от May 15th, 2009,
В подшивках: CSS, Javascript

Сегодня мне понадобилось сделать более удобный интерфейс для проекта «Открытый Томск», чем куча перегружаемых страниц. Решил сделать что-то наподобии табов для выполнения функций их добавления, редактирования и удаления.

Для начала создадим атмосферу табов

<div class=”tabs”>
<span style=”left:20px;position:relative;”><span class=”active” id=”tab_h_list” onclick=”make_active(‘tab_list’)”>Список</span>
<span class=”notactive” id=”tab_h_new” onclick=”make_active(‘tab_new’)”>Новый раздел</span></span>
<div class=”tab” id=”tab_list” style=”display:block;”>hi!</div>
<div class=”tab” id=”tab_new” style=”display:none;”>Hi new record!</div>
</div>

Ну а теперь надо чтобы эти табы ожили. Для этого мы пишем функцию для показа\скрытия некоторых элементов

<script>
function make_active(tab) {

if (tab==”tab_list”) {
document.getElementById(‘tab_h_new’).className = ‘notactive’;
document.getElementById(‘tab_h_list’).className = ‘active’;
document.getElementById(‘tab_list’).style.display = ‘block’;
document.getElementById(‘tab_new’).style.display = ‘none’;
return false; }

if (tab==”tab_new”) {
document.getElementById(‘tab_h_list’).className = ‘notactive’;
document.getElementById(‘tab_h_new’).className = ‘active’;
document.getElementById(‘tab_list’).style.display = ‘none’;
document.getElementById(‘tab_new’).style.display = ‘block’;
return false;}
}
</script>

Ну и конечно же надо описать стилями табы

.tabs {
width:100%;
}
.tab {
background-color:#fff;
border: 1px solid #555;
padding:10px;
-moz-border-radius:10px 10px 10px 10px;
}
.active {
font-size:11px;
padding:3px;
font-weight:bold;
background-color:#fff;
border-top: 1px solid #555;
border-left: 1px solid #555;
border-right: 1px solid #555;
-moz-border-radius:5px 5px 0px 0px;
}
.notactive {
font-size:11px;
font-weight:normal;
padding-left:3px;
padding-right:3px;
background-color:#f0f1f3;
border-top: 1px solid #555;
border-left: 1px solid #555;
border-right: 1px solid #555;
}