[X] Помощник

[scanread Topic Starter]

Доброго времени суток, уважаемые форумчане.

Пробую вывести вкладки в профиле вертикального типа. Частично подшаманил код, выводит хотя бы блоки, но не скрывает обратно. Где зарыта собака - без понятия. Ссылка страницы с табами test.scanread.name/users/admin

Если переключать - видно, что выводятся блоки. Но не прячутся обратно. В шаблоне внизу страницы подключены 2 скрипта

<script type='text/javascript' src='/templates/notepad/js/themify.builder.module.plugins.js'></script>
<script type='text/javascript' src='/templates/notepad/js/themify.builder.script.js'></script>

В первом есть вот такой участок кода, имеющий отношение к табам, я его немного пилил... :

Код

;(function ($) {
    $.fn.tabify = function () {
        return this.each(function () {
            var tabs = $(this);
            $('.tab-content', tabs).hide();
            $('ul.tab-nav li:first', tabs).addClass('current');
            $('div:first', tabs).show();
            var tabLinks = $('ul.tab-nav li', tabs);
            $(tabLinks).click(function () {
                $(this).addClass('current').siblings().removeClass('current');
                urlrel = $(this).attr("rel");
                todir = $(this).attr("name");
                $('.tab-content', tabs).show();
                var activeTab = $(this).find('li').attr('name');
                $(activeTab).show();
                
                if (urlrel) {

$('#' + todir).html('Грузим-с...');
$('#' + todir).load(urlrel, {});
}
                return false;
            });
        });
    };
})(jQuery);

Во втором:

Код

tabs: function() {
            $(".module.module-tab").each(function(){
                $height = $(".tab-nav", this).outerHeight();
                if($height > 200) {
                    $(".tab-content", this).css('min-height', $height);
                }
            });
            $(".module.module-tab").tabify();
        },

        tabsDeepLink: function() {
            if($(window.location.hash).length > 0){
                $('a[href=' + window.location.hash + ']').click();
                $('html, body').animate({ scrollTop: $(window.location.hash).offset().top}, 1000);
            }
        },

Здесь ничего не пилил.

Хтмл код самих табов у меня такой вот:

Код

<ul class="tab-nav">
                <li href="#upr_profile" name="upr_profile"><span>Промиль</span></li>
                <li rel="/actions/my_friends" name="upr_feed"><span>Лента</span></li>
                <li rel="/clubs/by_user_1" name="tab-clubs"><span>Клубы</span></li>
                                <li href="#upr_awards" name="upr_awards"><span>Награды</span></li>              
            </ul>

Т.е., поскольку ссылка является якорем, пришлось немного переписать код в том плане, чтобы убрать ссылку и попробовать вывести корректно табы через li rel= name= или li href, где name указывает на див с id=name, который должен отображаться, когда активный выбранный li. В общем, через инспектрацию элементов на странице с помощью браузера можно увидеть полный код и что на что указывает.

Кто разбирается, пожалуйста, помогите припудрить в рабочий вид. Заранее благодарю.

з.ы. по bootstrap вопрос будет после решения данного вопроса. Он аналогичный, в принципе, изменять надо будет сам скрипт бутстрепа, чтобы считывался пункт меню li по name или rel. Листал код, но не понял совсем в нем ничего.

з.ы.з.ы. прошу сильно не пинать и не гнать в шею) что поделать, люблю я красивости всякие куда-то цеплять. Кое-что выходит, делаю сам, а кое что, увы, еще не шарю.

[Karlasan]

первый кусочек кода замени вот на это:

Код

(function ($) {
    $.fn.tabify = function () {
        return this.each(function () {
            var tabs = $(this);
            $('.tab-content', tabs).hide();
            $('ul.tab-nav li:first', tabs).addClass('current');
            $('div:first', tabs).show();
            var tabLinks = $('ul.tab-nav li', tabs);
            $(tabLinks).click(function () {
if($(activeTab))$(activeTab).hide();
                $(this).addClass('current').siblings().removeClass('current');
                urlrel = $(this).attr("rel");
                todir = $(this).attr("name");
                $('.tab-content', tabs).hide();
                var activeTab = $(this).closest('li').attr('name');

                $('#'+activeTab).show();
                
                if (urlrel) {

$('#' + todir).html('Подождите. Загружаю данные...');
$('#' + todir).load(urlrel, {});
}
                return false;
            });
        });
    };
})(jQuery);

Замечание модератора: Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней. Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой или обратитесь к любому из модераторов.