Показать сообщение отдельно
  #18 (permalink)  
Старый 13.08.2016, 21:25
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Ладно, смотри как можно сделать применительно к твоей каше. Сперва надо засунуть кнопки табов в контейнер с классом menuTabs. Класс нужен как идентификатор.

<span class="menuTabs">
	<div data-for="page1" class="leftname2 active">Новые</div>
	<div data-for="page2" class="leftname2">Обсуждаемые</div>
	<div data-for="page3" class="leftname2">Интересные</div>
</span>


При этом класс активной кнопки - 'active' - должен быть. Он может быть на любой кнопке, но только один и должен быть в html'е.

Второе. Для связи между кнопками и страницами нельзя применять индекс элемента в коллекции. Хотя на практике оно и совпадает, в теории порядок элементов на странице и в DOM'e имеет право не совпадать. Для связи использован тег data-for.

Третье. Класс active должен быть реальным css-правилом, которое показывает активную кнопку, а в каше страниц соответствующая активная страница должна быть видимой, а остальные - нет. Это можно сделать вписав в класс .contextlink0{display:none}, а активной странице через id: #page1{display:block;}

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

После своих табов или в конце всего хтмля вставляешь такой вот скрипт, обновляешь страницу и смотришь что получилось и читаешь в консоли, что может напишут, ибо я ничего не запускал и не собираюсь.

(function(){

	var 
	pid=function(){return activeTab.getAttribute('data-for');},
	menuTabs=document.querySelector('menuTabs'),
	activeTab=menuTabs.querySelector('active'),
	pageId=pid(),
	
	tog=function(el){
	
		var s = document.getElementById(pageId).style;
		s.display=(s.display=='none')?'block':'none';
		activeTab.classList.toggle('active');
		
		if(el){
			activeTab=el;
			pageId=pid();
			localStorage.lastTabId=pageId;
			tog();
		}
	};
	
	menuTabs.addEventListener('click', 
	
		function(e){
			
			var el=e.target;
			
			if(el.classList.contains('leftname2') && 
				el!==activeTab) tog(el);

		}
	);
	
	var id=localStorage.lastTabId;
	
	if(id && id!=pageId)
		tog(menuTabs.querySelector('[data-for="'+id+'"]'));
	
})();


Скрипт работает живьем, то есть ничего не индексирует и не кеширует.

Последний раз редактировалось warren buffet, 13.08.2016 в 21:31.
Ответить с цитированием