Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) jQuery Вкладки (табы) как у майл.ру

Вкладки (табы) как у майл.ру


     14.04.2014    jQuery    1545

вопрос
Всем привет Профессионалы. Внизу скрипт табов.

Вот к примеру у майл.ру при нажатии 1 раз на таб сначала показывается таб на который было нажатие,
а при повторном нажатии на него же уже переходит по ссылке.

А у меня при нажатии на вкладку открывается вкладка и тут же сама ссылка.

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

Спасибо огромное заранее за помощь.



jQuery.fn.ttabs = function(options){

    var options = jQuery.extend({

        activeClass: 'active-ttab' // Класс активной вкладки

      },options);

    return this.each(function() {

        $(this).find('.tt-panel:first').show(0);
        $(this).find('.index-tabs li:first').addClass(options.activeClass);

        $(this).find('.index-tabs li').click(
            function() {
                $(this).parent().parent().find('.index-panel .tt-panel').hide(0);
                var numEl= $(this).index();
                $(this).parent().parent().find('.index-panel .tt-panel').eq(numEl).show();
                $(this).parent().find('li').removeClass(options.activeClass);
                $(this).addClass(options.activeClass);
            }
        );

    });

};



<div class="index-tabs">
<ul>
<li ><a href="/lol" target="_blank">Первая</a></li>
<li><a href="/lol2" target="_blank">Вторая</a></li>
</ul>
<div class="index-panel">
<div class="tt-panel" >
Инфо Первого
</div>
<div class="tt-panel" >
Инфо Второго
</div>
</div>
</div>


Ответил: rocksmart


После

$(this).addClass(options.activeClass);

вставить

if(!$(this).attr('data-click')){
$(this).attr('data-click', 'yes');
return false;
}


Полный пример

<style>
.index-tabs span {
float:left;
color:#808080;
border:1px solid #dacec5;
border-bottom:0;
background:#f9f9f9;
padding:10px 15px 10px 15px;
margin:0 2px 0 0;
cursor:pointer;
}
.tt-panel {
display:none;
width:450px;
color:#3a1821;
border:1px solid #dacec5;
border-top:0;
background:#e6e2d2;
padding:10px;
clear:both;
}
.active-ttab {
color:#000 !important;
background:#e1e1e1 !important;
}
.active-ttab2 {
color:#83390d !important;
background:#e6e2d2 !important;
}

</style>








<script type="text/javascript" src="http://dle-field.ura/engine/classes/js/jquery.js"></script>

<script>

jQuery.fn.ttabs = function(options){
var options = jQuery.extend({
activeClass: 'active-ttab' // Класс активной вкладки
},options);
return this.each(function() {
$(this).find('.tt-panel:first').show(0);
$(this).find('.index-tabs span:first').addClass(options.activeClass);
$(this).find('.index-tabs span').click(
function() {
$(this).parent().parent().find('.index-panel .tt-panel').hide(0);
var numEl= $(this).index();
$(this).parent().parent().find('.index-panel .tt-panel').eq(numEl).show();
$(this).parent().find('span').removeClass(options.activeClass);
$(this).addClass(options.activeClass);



if(!$(this).attr('data-click')){
$(this).attr('data-click', 'yes');
return false;
}


}
);
});
};



</script>

<script type="text/javascript">
$(document).ready(function() {
$('.tt-tabs').ttabs();
});
</script>


<div class="tt-tabs">
<div class="index-tabs">
<span><a href="/" target="_blank">Первая вкладка</a></span>
<span><a href="/" target="_blank">Вторая вкладка</a></span></span>
<span><a href="/" target="_blank">Третья вкладка</a></span>
</div>
<div class="index-panel">
<div class="tt-panel">
Содержание первой вкладки
</div>
<div class="tt-panel">
Содержание второй вкладки
</div>
<div class="tt-panel">
Содержание третьей вкладки
</div>
</div>
</div>

Комментарии пользователей (17)

alexgut
1

40 | 2

alexgut - 14 апреля 2014 19:34 - Юзер

Уточню, у майл.ру это на главной, где новости.

alexgut
1

40 | 2

alexgut - 14 апреля 2014 20:12 - Юзер

Помогите пожалуйста, ведь ответ где-то на поверхности, но никак не могу его найти.

fh79655l123
11

206 | 25

fh79655l123 - 14 апреля 2014 21:08 - Юзер


Тебе эти табы нужны?

alexgut
1

40 | 2

alexgut - 14 апреля 2014 21:12 - Юзер

Привет, спасибо за отклик, да эти табы мне надо 1 в 1 как у майл.

То есть к примеру нажми на Спорт, откроется таб Спорта. А если ЕЩЕ раз нажать на Спорт, когда Спорт уже активна, то он перейдет по ссылке на Раздел Спорт новостей.

alexgut
1

40 | 2

alexgut - 14 апреля 2014 21:13 - Юзер

А у меня если нажать к примеру на Спорт, то он сразу перейдет по ссылке.

fh79655l123
11

206 | 25

fh79655l123 - 14 апреля 2014 21:17 - Юзер

Я конечно не профессионал =) но щас попробую чтото похожее сделать

alexgut
1

40 | 2

alexgut - 14 апреля 2014 21:22 - Юзер

Спасибо за помошь большое, выше уже дали ответ. Спасибо еще раз за участие.

rocksmart, а вам огромное спасибо за решение, все работает.

alexgut
1

40 | 2

alexgut - 14 апреля 2014 21:33 - Юзер

Заметил, что не много не так.

Допустим мы нажали 1 раз на первую вкладку, он нам ее открыл.
Далее нажали на вторую, так же открыл.
Далее на третью кладку и он так же открыл эту вкладку.

То есть в данный момент активна 3 Вкладка.
И если я опять нажму допустим на вкладку первую то он не откроет ее, а перейдет по ссылке.

А хочется, что бы как у майл.ру 1 в 1.

То есть перейти по ссылке можно было если допустим, нажал на 3 вкладку и она активная и с нее уже можно перейти.

То есть что бы ссылка работала только на активной вкладке.

fh79655l123
11

206 | 25

fh79655l123 - 14 апреля 2014 21:32 - Юзер

rocksmarе, У меня тоже работает =) надо сохранить вдруг пригодится

fh79655l123
11

206 | 25

fh79655l123 - 14 апреля 2014 21:40 - Юзер

ROCKSMART, Есть косяк =)
1,2.. - 1,2.. вкладка
при нажатии 1 открывается таб потом еще раз по 1 переходет по ссылки затем 2 открывается таб и сново 1 сразу ссылка открывается без повторного нажатия

alexgut
1

40 | 2

alexgut - 14 апреля 2014 21:43 - Юзер

Да, тоже самое, пробую что нибудь придумать )) Может Rock придет поможет.

alexgut
1

40 | 2

alexgut - 14 апреля 2014 21:45 - Юзер

Надо какую-то проверку на то что вкладка с классом активен

alexgut
1

40 | 2

alexgut - 14 апреля 2014 22:14 - Юзер

Такой же как у майл ру, у квипа http://qip.ru/

alexgut
1

40 | 2

alexgut - 14 апреля 2014 22:18 - Юзер

У квипа такой код


//переключение табов новостей
function qipNewsSwitchTheme(tab)
{
    tab = tab.parentNode; //a < li
    if(hasClass(tab, 'qnh_active'))
        return true;

    var news = tab.parentNode.parentNode, //li < ul < div
        tabs = [], themes = [];

    if(('themes' in news) && ('tabs' in news))
        tabs = news.tabs, themes = news.themes;
    else
    {
        news.tabs   = tabs   = childs.apply(tab.parentNode, ['li', null, true]);
        news.themes = themes = childs.apply(news, ['div', 'qn_content', true]);
    }

    news.tabs.active = tab;
    var current = 0;
    for(var i = 0; i < themes.length; i++)
        (tabs[i] == tab)
            ? (setClass(tabs[i], 'qnh_active'), _show(themes[i]), current = i)
            : (unsetClass(tabs[i], 'qnh_active'), _hide(themes[i]));

    set_startqip_settings('news_tab', current);

    return false;
}

//переключение табов новостей 2014
function qipNewsSwitchTheme2014(tab)
{
    tab = tab.parentNode; //a < li
    if(hasClass(tab, 'current'))   //qnh_active
        return true;

    var news = tab.parentNode.parentNode, //li < ul < div
        tabs = [], themes = [];

    if(('themes' in news) && ('tabs' in news)) {
        tabs = news.tabs, themes = news.themes;
    } else
    {
        news.tabs   = tabs   = childs.apply(tab.parentNode, ['li', null, true]);
        news.themes = themes = childs.apply(news, ['div', 'qn_content', true]);
    }

    news.tabs.active = tab;
    var current = 0;
    for(var i = 0; i < themes.length; i++) {
        (tabs[i] == tab)
            ? (setClass(tabs[i], 'current'), _show(themes[i]), current = i)
            : (unsetClass(tabs[i], 'current'), _hide(themes[i]));
    }

    set_startqip_settings('news_tab', current);

    return false;
}

//переключение табов новостей 2014
function qipNewsSwitchTheme_2014(tab)
{
    tab = tab.parentNode; //a < li
    if(hasClass(tab, 'current'))   //qnh_active
        return true;

    var news = tab.parentNode.parentNode.parentNode, //li < ul < div < div
        tabs = [], themes = [];
    
    if(('themes' in news) && ('tabs' in news)) {
        tabs = news.tabs, themes = news.themes;
    } else{
        news.tabs   = tabs   = childs.apply(tab.parentNode, ['li', null, true]);
        news.themes = themes = childs.apply(news, ['div', 'qn_content', true]);
    }

    news.tabs.active = tab;
    var current = 0;
    for(var i = 0; i < themes.length; i++) {
        (tabs[i] == tab)
            ? (setClass(tabs[i], 'current'), _show(themes[i]), current = i)
            : (unsetClass(tabs[i], 'current'), _hide(themes[i]));
    }

    set_startqip_settings('news_tab', current);

    return false;
}


alexgut
1

40 | 2

alexgut - 14 апреля 2014 22:44 - Юзер

up, помогите пожалуйста, как сделать что бы если кликаешь на другой таб, yes удалялось с первого.

alexgut
1

40 | 2

alexgut - 14 апреля 2014 22:54 - Юзер

Кому надо, доделал код Rock, возможно очень криво, но работает.


if( !$(this).attr('click')){
 $(this).parent().find('li').removeAttr('click', 'yes');
 $(this).attr('click', 'yes');
 return false;

master_z1zzz
18

master_z1zzz - 14 апреля 2014 23:27 - Юзер

Хоть бы скрин скинули...

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы