Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.03.2016, 12:21
Новичок на форуме
Отправить личное сообщение для mo0n Посмотреть профиль Найти все сообщения от mo0n
 
Регистрация: 18.01.2016
Сообщений: 9

Не работает более одного перехода по меню.
Здравствуйте, есть меню:
<ul class='tabs-nav'>
                        <li class='active'>Мнения экспертов</li>
                        <li>Отзывы</li>
                        <li>Ваши вопросы</li>
                    </ul>

При клике на какой-либо из форм должен отражаться тот или иной текст.
<ul class='tabs-content'>
<li>1</li>
<li>2</li>
<li>3</li>

В меню все ок, при выборе того или иного пункта, добавляется класс актив, но вот текст отображается только после первого перехода по какой-либо из ссылок.
Так же отмечу, что изначально таблица с текстом выглядит как:
class=active;
display:none;
display:none;
А после первого перехода принимает вид:
display:none;
display:list-item;
display:none;
На сколько я понял, косяк где-то вот тут:
$t.closest(".tabs").find(".tabs-content>li.active").removeClass('active').fadeOut(300, function() {
				$lis.eq($t.index()).fadeIn({
					duration:300,
					 //start:tabstartanimate
					start:function() {
						window.tabstartanimate();
						window.tabstartanimate1();
					}
				}).addClass('active');
			});

Помогите пож-а разобраться. Если я ошибся с частью кода, могу скинуть весь(100 строк).
Ответить с цитированием
  #2 (permalink)  
Старый 04.03.2016, 12:32
Новичок на форуме
Отправить личное сообщение для mo0n Посмотреть профиль Найти все сообщения от mo0n
 
Регистрация: 18.01.2016
Сообщений: 9

var tabstartanimate=function() {

};

$(document).ready(function() {

	if (typeof MobileDetect=='function') 
  		var md = new MobileDetect( window.navigator.userAgent );
  		
	if (md&&md.mobile()) {
		$('.mobile-tablet').attr('style', 'float: right; margin: 0 0 0 15px;position: relative; visibility: visible;');	
		$('.no-mobile-tablet').attr('style', 'float: right; margin: 0 0 0 15px;position: absolute; visibility: hidden;');	
	} else $('.no-mobile-tablet').attr('style', 'float: right; margin: 0 0 0 15px;position: relative; visibility: visible;');

	var $r=$(".wide-window"),
		$w=$(window);
	if ($(".tabs-nav").length>0) {
		var $t=$(".tabs-nav>li.active"),
			$l=$t.closest(".tabs").find(".tabs-content>li").eq($t.index());
		$l.addClass('active').fadeIn(0).siblings().fadeOut(0);

		$t.closest(".tabs-nav-wrapper").find(".triangle").css('left',$t.offset().left-$t.closest(".tabs-nav-wrapper").offset().left+($t.width()-16)/2); 
		
		$(".tabs-nav>li").click(function() {
			var $t=$(this),
				$lis=$t.closest(".tabs").find(".tabs-content>li");
			if ($t.hasClass('active'))
				return;
			$t.addClass('active').siblings().removeClass('active');
			$t.closest(".tabs").find(".tabs-content>li.active").removeClass('active').fadeOut(300, function() {
				$lis.eq($t.index()).fadeIn({
					duration:300,
					 //start:tabstartanimate
					start:function() {
						window.tabstartanimate();
						window.tabstartanimate1();
					}
				}).addClass('active');
			});
			
			$t.closest(".tabs-nav-wrapper").find(".triangle").animate({
				'left':$t.offset().left-$t.closest(".tabs-nav-wrapper").offset().left+($t.width()-16)/2}, 600); 

		});
		if (location.hash) {
			
			$(".tabs-nav>li").eq(location.hash.substr(1)).trigger('click');
		}
	}
	function resize() {
		var w=$w.width();
		$r.css({
			'width': w,
			'margin-left': -(w-960)/2
		});
	}
	resize();
	$w.resize(resize);

	function transitionEndEventName () {
	    var i,
	        undefined,
	        el = document.getElementsByClassName("animatedend"),
	        transitions = {
	            'transition':'transitionend',
	            'OTransition':'otransitionend',  // oTransitionEnd in very old Opera
	            'MozTransition':'transitionend',
	            'WebkitTransition':'webkitTransitionEnd'
	        };

	    for (i in transitions) {
	        if (transitions.hasOwnProperty(i) && el[0].style[i] !== undefined) {
	            return transitions[i];
	        }
	    }
	}

	$(".applyCollost").click(function() {
		$(this).closest('p').find('.after').addClass('animated');
		$(this).closest('p').find('.before').addClass('animated');
		$(this).closest('span').find('.applyCollost').removeClass('delay').addClass('animated');
		$(this).closest('span').find('.refresh').addClass('animated');
	})
	$(".refresh").click(function() {
		$(this).closest('p').find('.after').removeClass('animated').addClass('animatedend');
		$(this).closest('p').find('.before').removeClass('animated');
		$(this).closest('span').find('.applyCollost').removeClass('animated');
		$(this).closest('span').find('.refresh').removeClass('animated');

		var transitionEnd = transitionEndEventName();
		$(".animatedend").on(transitionEnd, function() {
			$(this).closest('p').find('.after').removeClass('animatedend')
		});
	})

});
$(window).ready(function() {
	setTimeout(function() {
		$(".applyCollost").animate({'opacity':1},1000,function() {
			$(this).removeAttr('style').addClass('faded');
		});
	},2000);
});
Ответить с цитированием
  #3 (permalink)  
Старый 04.03.2016, 12:37
Новичок на форуме
Отправить личное сообщение для mo0n Посмотреть профиль Найти все сообщения от mo0n
 
Регистрация: 18.01.2016
Сообщений: 9

Затупил, 36 строка...
Всем спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jQuery UI widget и привязка более одного инстанса к элементу LabMapDo jQuery 2 11.09.2014 13:03
почему событие срабатывает более одного раза garisson Элементы интерфейса 3 08.11.2012 05:22
Подсветка выделенного элемента меню ajax-сайта crayday AJAX и COMET 0 11.05.2012 12:25
Проблема с аккордионом и меню Tie ExtJS 3 01.09.2011 14:36
меню на CSS не работает в IE scuter Общие вопросы Javascript 3 24.06.2010 23:03