Tab меню

Тема в разделе "Веб-дизайн", создана пользователем мир, 21 апр 2011.

Модераторы: zek24
  1. мир

    мир Постоялец

    Регистр.:
    15 мар 2008
    Сообщения:
    83
    Симпатии:
    5
    помогите сделать Tab меню, как нарисованно во вложении, чтобы при переключении между закладками меню, страница не перезагружалась
     

    Вложения:

    • 123.jpg
      123.jpg
      Размер файла:
      27,3 КБ
      Просмотров:
      14
  2. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.133
    Симпатии:
    668
    http://dimox.name/universal-jquery-tabs-script/
     
  3. мир

    мир Постоялец

    Регистр.:
    15 мар 2008
    Сообщения:
    83
    Симпатии:
    5
    я пробовал это скрипт, но когда я поворачиваю текст, то все закладки съезжают, и я их не могу выровнить...
     
  4. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    пример без перезагрузки страницы
    HTML:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>tab</title>
    
    <script type="text/javascript">
    var tabs = 3;
    function init(){
        for(var i=1;i<=tabs;i++){
            document.getElementById('tab'+i).onclick = function(){
                //alert(this.id);
                for(var i=1;i<=tabs;i++){
                    document.getElementById('tab'+i).className = 'tab';
                }
                for(var i=1;i<=tabs;i++){
                    document.getElementById('tab'+i+'_content').className = 'content';
                }
                document.getElementById(this.id).className = 'tab active';
                document.getElementById(this.id+'_content').className = 'content active';
            };
        }
    }
    window.onload = init; 
    </script>
    
    <style type="text/css">
    <!--
    .tabs {
        float:left;
    }
    .tab {
        width:30px;
        border: 1px solid #F00;
        height: 100px;
        cursor:pointer;
        margin:0 5px 5px 0;
    }
    .tab.active {
        border: 1px solid #0F0;
    }
    .content {
        border: 1px solid #00F;
        height:315px;
        width:200px;
        float:left;
        display:none;
    }
    .content.active {
        display:block;
    }
    -->
    </style>
    </head>
    
    <body>
    <div class="tabs">
    <div id="tab1" class="tab active">tab1</div>
    <div id="tab2" class="tab">tab2</div>
    <div id="tab3" class="tab">tab3</div>
    </div>
    
    <div id="tab1_content" class="content active">content1</div>
    <div id="tab2_content" class="content">content2</div>
    <div id="tab3_content" class="content">content3</div>
    
    </body>
    </html>
    
    
    или с jquery
    HTML:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>tab</title>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(".tabs div").click(function(){ 
            $(".tabs div").removeClass().addClass('tab');
            $(".content").removeClass().addClass('content');
            $(this).addClass('tab active');
            $("#"+$(this).attr("id")+"_content").addClass('active');
        });
    });
    </script>
    
    <style type="text/css">
    <!--
    .tabs {
        float:left;
    }
    .tab {
        width:30px;
        border: 1px solid #F00;
        height: 100px;
        cursor:pointer;
        margin:0 5px 5px 0;
    }
    .tab.active {
        border: 1px solid #0F0;
    }
    .content {
        border: 1px solid #00F;
        height:315px;
        width:200px;
        float:left;
        display:none;
    }
    .content.active {
        display:block;
    }
    -->
    </style>
    </head>
    
    <body>
    <div class="tabs">
    <div id="tab1" class="tab active">tab1</div>
    <div id="tab2" class="tab">tab2</div>
    <div id="tab3" class="tab">tab3</div>
    </div>
    
    <div id="tab1_content" class="content active">content1</div>
    <div id="tab2_content" class="content">content2</div>
    <div id="tab3_content" class="content">content3</div>
    
    </body>
    </html>
    
    
     
    мир нравится это.
  5. мир

    мир Постоялец

    Регистр.:
    15 мар 2008
    Сообщения:
    83
    Симпатии:
    5
    polyetilen, спасибо
    подскажи как повернуть текст закладок, чтобы он вертикально был?
     
  6. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    перевернуть текст стандартно для ie через фильтр, а для firefox, opera, движка webkit (chrome, safari...) через rotate, чтоб не было проблем надо переварачивать не сами табы, а текст в них обернуть в span и уже этот span переворачивать.

    HTML:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>tab</title>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(".tabs div").click(function(){ 
            $(".tabs div").removeClass().addClass('tab');
            $(".content").removeClass().addClass('content');
            $(this).addClass('tab active');
            $("#"+$(this).attr("id")+"_content").addClass('active');
        });
    });
    </script>
    
    <style type="text/css">
    <!--
    .tabs {
        float:left;
    }
    .tab {
        width:30px;
        border: 1px solid #F00;
        cursor:pointer;
        margin:0 5px 5px 0;
        height:100px;
    
    }
    .tab span{
        -webkit-transform:rotate(-90deg); 
        -moz-transform:rotate(-90deg);    
        -o-transform:rotate(-90deg);
    
        display:block;
        white-space:nowrap;
        margin-top:50px;
    }
    .tab.active {
        border: 1px solid #0F0;
    }
    .content {
        border: 1px solid #00F;
        height:315px;
        width:200px;
        float:left;
        display:none;
    }
    .content.active {
        display:block;
    }
    -->
    </style>
    
    <!--[if IE]>
    <style type="text/css">
    <!--
    .tab span{
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        width:90px;
        margin-top:0px;
    }
    -->
    </style>
    <![endif]-->
    
    
    </head>
    
    <body>
    <div class="tabs">
    <div id="tab1" class="tab active"><span>ТАБ РАЗ</span></div>
    <div id="tab2" class="tab"><span>tab2</span></div>
    <div id="tab3" class="tab"><span>tab3</span></div>
    </div>
    
    <div id="tab1_content" class="content active">content1</div>
    <div id="tab2_content" class="content">content2</div>
    <div id="tab3_content" class="content">content3</div>
    
    </body>
    </html>
    
    
     
    мир нравится это.
  7. мир

    мир Постоялец

    Регистр.:
    15 мар 2008
    Сообщения:
    83
    Симпатии:
    5
    При обновлении странички, меню переключается на первый раздел...
    Как сделать чтобы браузер запоминал вкладку которую выбрал пользователь и при обновлении не перекидывало на первую вкладку?
     
  8. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    например сохранять ид елемента вкладки в куки
    HTML:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>tab</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript">
        
    function cookie_set(name, value, seconds){
        if (typeof(seconds) != 'undefined'){
            var date = new Date();
            date.setTime(date.getTime() + (seconds*1000));
            var expires = "; expires=" + date.toUTCString();
        }else{
            var expires = "";
        }
        document.cookie = name+"="+value+expires+"; path=/";
    }
    
    function cookie_get(cookieName){
        var theCookie=""+document.cookie;
        var ind=theCookie.indexOf(cookieName);
        if (ind==-1 || cookieName=="") return false;
        var ind1=theCookie.indexOf(';',ind);
        if (ind1==-1) ind1=theCookie.length;
        return unescape(theCookie.substring(ind+cookieName.length+1,ind1));
    }
    
    function activate_tab(id){
        $(".tabs div").removeClass().addClass('tab');
        $(".content").removeClass().addClass('content');
        $("#"+id).addClass('tab active');
        $("#"+id+"_content").addClass('active');
        cookie_set('tab_id', id, 10000000);
    }
    
    var tab_id = 'tab1';
    $(document).ready(function(){
        if(cookie_get('tab_id')){
            tab_id = cookie_get('tab_id');
            activate_tab(tab_id);
        }
        $(".tabs div").click(function(){ 
            activate_tab($(this).attr("id"));
        });
    });
    </script>
    <style type="text/css">
    <!--
    .tabs {
        float:left;
    }
    .tab {
        width:30px;
        border: 1px solid #F00;
        cursor:pointer;
        margin:0 5px 5px 0;
        height:100px;
    }
    .tab span{
        -webkit-transform:rotate(-90deg); 
        -moz-transform:rotate(-90deg);    
        -o-transform:rotate(-90deg);
        display:block;
        white-space:nowrap;
        margin-top:50px;
    }
    .tab.active {
        border: 1px solid #0F0;
    }
    .content {
        border: 1px solid #00F;
        height:315px;
        width:200px;
        float:left;
        display:none;
    }
    .content.active {
        display:block;
    }
    -->
    </style>
    <!--[if IE]>
    <style type="text/css">
    <!--
    .tab span{
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        width:90px;
        margin-top:0px;
    }
    -->
    </style>
    <![endif]-->
    </head>
    <body>
    <div class="tabs">
    <div id="tab1" class="tab active"><span>ТАБ РАЗ</span></div>
    <div id="tab2" class="tab"><span>tab2</span></div>
    <div id="tab3" class="tab"><span>tab3</span></div>
    </div>
    <div id="tab1_content" class="content active">content1</div>
    <div id="tab2_content" class="content">content2</div>
    <div id="tab3_content" class="content">content3</div>
    </body>
    </html>
    
     
    ksana и мир нравится это.