№ 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;
}
При возможности, конечно, лучше использовать jQuery. Реализовать табы на нем гораздо проще, чем описано тут.
Fortune cookie: If you were attacked by a homosexual, would you beat him off?
Замечательный пример. Спасибо, очень пригодился.