INT 21h

Hi, I am Vladimir Smagin, sysadmin. Telegram Email

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

№ 1451 В разделе "Программирование" от May 15th, 2009,

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



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

<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. Реализовать табы на нем гораздо проще, чем описано тут.

Всего 1 комментарий »

One response to “Мои табы на CSS + Javascript”

  1. Замечательный пример. Спасибо, очень пригодился.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Комментарии

  • 21h: нене ) без меня )
  • Серегй: Не совсем грабить)) если грабить можно и без рации, есть...
  • 21h: магазин грабить собрались? ) не, тут я не помощник ;)
  • Серегй: А что бы мне поймать чужую волну, что мне для этого нужно...
  • 21h: слушать никто не запрещает. нет закона, который запрещает...
  • Серегй: Я хотел узнать могу ли я просто прийти с данной рацией baofeng...
  • 21h: У меня есть только эти 2. По другим ничего не знаю. В интернете...

© Vladimir Smagin, 2005-2017. Копирование материалов без разрешения запрещено.
Яндекс.Метрика