Tab меню

мир · 21 Апр 2011

помогите сделать Tab меню, как нарисованно во вложении, чтобы при переключении между закладками меню, страница не перезагружалась

mdss · 21 Апр 2011

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

мир · 21 Апр 2011

mdss написал(а):
*** скрытое содержание ***

я пробовал это скрипт, но когда я поворачиваю текст, то все закладки съезжают, и я их не могу выровнить...

polyetilen · 21 Апр 2011

пример без перезагрузки страницы

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>

мир · 21 Апр 2011

polyetilen, спасибо
подскажи как повернуть текст закладок, чтобы он вертикально был?

polyetilen · 21 Апр 2011

перевернуть текст стандартно для 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>

мир · 22 Апр 2011

При обновлении странички, меню переключается на первый раздел...
Как сделать чтобы браузер запоминал вкладку которую выбрал пользователь и при обновлении не перекидывало на первую вкладку?

polyetilen · 23 Апр 2011

например сохранять ид елемента вкладки в куки

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>

Tab меню

мир

Постоялец

Вложения

mdss

♖♘♗♕♔♗♘♖

мир

Постоялец

polyetilen

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

мир

Постоялец

polyetilen

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

мир

Постоялец

polyetilen

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