Примечание автора: именно location.hash было отдано предпочтение над работой с document.cookie, для того, чтобы и у других посетителей была возможность получить прямую ссылку в адресной строке браузера для любой из вкладок.

Пример «запоминания открытой вкладки» к статье Вы можете посмотреть здесь.

Примечание автора: из css первоначального примера удаляем правило:

CSS:

#tabs>dt:first-child + dd{
        display: block;
     }

А так же добавляем в css определение стилей для класса активной вкладки:

CSS:

.activeTab{
        border-bottom: none!important;
        background: #ff0000!important;
        height: 21px!important;
        color: #fff;
        font-weight: bold;
     }
     .activeTab + dd{
        display: block;
     }

Добавляем следующий javascript в секцию head:

Javascript:

    <script type="text/javascript">
    /**   евдинственная загзвоздка, css 2 , 3
        не позволяют сделать вкладку "активной" (заголовок вкладки),
        так как при чтении вкладка теряет фокус,
        но мы всегда можем с помощью пары строк
        на Javascript присвоить активной "вкладке"
        свой класс
    **/
  function setActiveTab(){
    var tabs            = document.getElementById("tabs");
    if(tabs && tabs.hasChildNodes()){
        chNodes         = tabs.children;
        var chLength    = chNodes.length;
        var needDt      = [];
        var activeTab   = "";
        if(location.hash.indexOf("tabs=")!=-1){
            var exp     = new RegExp("tabs=(.*?)(&|$)","i");
            activeTab   = location.hash.match(exp);
            if(activeTab
                && typeof activeTab.length != "undefined"
                && activeTab.length
                && activeTab.length > 2
                ){
                      activeTab = activeTab[1];
                }
        }
        var found               = false;
        for(var i = 0; i < chLength; i ++){
           if(chNodes[i].nodeName.toLowerCase() == "dt"){
                var needDtLength    = needDt.length;
                needDt[needDtLength]= chNodes[i];
                if(needDt[needDtLength].id == ""){
                    needDt[needDtLength].id = "dt" + needDtLength;
                };
                if((activeTab == "" && needDtLength == 0) || (needDt[needDtLength].id == activeTab)){
                    needDt[needDtLength].className = "activeTab";
                    found     = true;
                }
           }
        }
        var needDtLength        = needDt.length;
        if(needDtLength){
        if(!found){
           needDt[0].className  = "activeTab";
        }
        for(var i = 0; i < needDtLength; i ++){
            needDt[i].onmouseover = function(){
                var needDtLength    = needDt.length;
                for(var k = 0; k < needDtLength; k ++){
                    if(needDt[k].id == this.id){
                        this.className          = "activeTab";
                        if(location.hash.indexOf("tabs=")!=-1){
                            var exp             = new RegExp("tabs=.*?(&|$)","i");
                            location.hash       = location.hash.replace(exp,"tabs="+escape(this.id)+"&");
                        } else {
                            location.hash      +=  "tabs="+escape(this.id)+"&";
                        }
                    } else {
                        needDt[k].className     = needDt[k].className.replace("activeTab","");
                    }
                }
            }
        }
        }
    }
  }
  if(typeof window.addEventListener != "undefined"){
    window.addEventListener("load", setActiveTab, false);
  } else if(typeof window.attachEvent != "undefined"){
      window. attachEvent("onload", setActiveTab);
  }
  </script>

В данном javascript е после загрузки страницы мы проверяем, содержится ли в хеше ссылки (часть, следующая за # в ссылке страницы) id вкладки dt (id назначается автоматически, если не задано), если содержится и существует такая вкладка dt с указанным id, тогда показываем её содержимое («запоминаем» активную вкладку dt). А так же регистрируем для каждой вкладки dt событие onmouseover – «по наведению мыши». Когда мы наводим мышь на вкладку, ей присваивается активный класс .activeTab, а так же происходит добавление id выделенной вкладки dt в хеш в адресной строки.

Итак, в результате мы получили семантически (логически) связанные красивые стилизованные вкладки - табы с использованием CSS 2.1, 3.0 + Javascript, которые умеют «запоминать» и «подсвечивать» активную вкладку даже после перезагрузки страницы. Но, целью этих статей была больше практика работы с CSS селекторами 2.1,3.0 и раскрытие их огромных возможностей при вёрстке документов.

Пример стилизации вкладок - табов средствами CSS 3.0

Интересная информация: свадьба - знаменательный момент в жизни каждого, тёплые мгновения которого остаются с Вами на фотографиях и видеозаписях, если Вы планируете такое событие, значит Вам нужен отличный свадебный фотограф. Ведь от этого человека зависит, какой оттенок и чувства придать Вашим воспоминаниям, и насколько яркими они будут.

Больше информации о веб технологиях можно узнать из нашего перечня всех статей на сайте:

Комментарии   

 
0 #1 Сергей 26.01.2013 01:18
Пожалуй лучшее решение, что есть в Интернете.

Правда, весь CSS переписал по новой, но скрипт на вес золота. Спасибо!
Цитировать
 

Добавить комментарий


Яндекс.Метрика