Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.09.2018, 13:39
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

Открывать таб по ссылке на нужной вкладке
Здравствуйте! Есть сайт, сделанный на каком-то хитроумном конструкторе (Webflow) с огромным файлом скриптов. Разбираться со всеми этими скриптами нет ни желания, ни, тем более, умения - все работает, ну и ладно...
Суть проблемы в следующем:
На одной из страниц, есть таб, который переключается путем добавления класса "w--current" в заголовки табов. Выглядит это примерно так:
<div class="tabs w-tabs">
	<div class="tabs-menu w-tab-menu">
		<a id="tab1" data-w-tab="Tab 1" class="tab_link w--current">Заголовок 1</a>
		<a id="tab2" data-w-tab="Tab 2" class="tab_link">Заголовок 2</a>
		<a id="tab3" data-w-tab="Tab 3" class="tab_link">Заголовок 3</a>
	</div>
	<div class="tabs-content w-tab-content">
		<div data-w-tab="Tab 1" class="w-tab-pane w--tab-active">
			<div class="tab_wrap">
				Вкладка 1				
			</div>
		</div>	
		<div data-w-tab="Tab 2" class="w-tab-pane">
			<div class="tab_wrap">
				Вкладка 2
			</div>
		</div>
		<div data-w-tab="Tab 3" class="w-tab-pane">
			<div class="tab_wrap">
				Вкладка 2
			</div>
		</div>
	</div>
</div>

Мне нужно на другой странице сделать ссылки на эту страницу с табами, таким образом, что бы открывался нужный таб, т.е. получается как-то через ссылку передавать какому блоку присваивать класс "w--current"... Воможно ли это?
Ответить с цитированием
  #2 (permalink)  
Старый 28.09.2018, 13:55
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

<a href="topagewithtabs.html#tab1">tab1link</a>
<a href="topagewithtabs.html#tab2">tab2link</a>
<a href="topagewithtabs.html#tab3">tab3link</a>

потом, при открытии страницы с табами

<script>
    var hash = location.hash.substr(1);
    hash && document.getElementById(hash).classList.add('w-current')
</script>
Ответить с цитированием
  #3 (permalink)  
Старый 28.09.2018, 14:24
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

Сообщение от SuperZen Посмотреть сообщение
<a href="topagewithtabs.html#tab1">tab1link</a>
<a href="topagewithtabs.html#tab2">tab2link</a>
<a href="topagewithtabs.html#tab3">tab3link</a>

потом, при открытии страницы с табами

<script>
    var hash = location.hash.substr(1);
    hash && document.getElementById(hash).classList.add('w-current')
</script>
да, спасибо, вроде бы срабатывает
А можно сделать, что бы якорь (#tab2) не отображался в конце url в адресной строке?
Ответить с цитированием
  #4 (permalink)  
Старый 28.09.2018, 14:49
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

сменить location без перезагрузки страницы
https://stackoverflow.com/questions/...ading-the-page
Ответить с цитированием
  #5 (permalink)  
Старый 28.09.2018, 14:59
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

Сообщение от SuperZen Посмотреть сообщение
сменить location без перезагрузки страницы
https://stackoverflow.com/questions/...ading-the-page
ну это сложновато для моего понимания (
Ответить с цитированием
  #6 (permalink)  
Старый 28.09.2018, 15:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

SuperZen,
а если так?
<script>
    var hash = location.hash;
    hash && document.querySelector(hash).classList.add('w-current')
</script>
Ответить с цитированием
  #7 (permalink)  
Старый 28.09.2018, 15:24
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

document.addEventListener('DOMContentLoaded', function () {
      var hash = location.hash.substr(1);
      hash && document.getElementById(hash).classList.add('w-current')
      history.replaceState(null, null, window.location.href.replace(/#.*$/, ''));//replace state
    })


это будет работать только если перейти с другой страницы, и если браузер поддерживает HTML5
Ответить с цитированием
  #8 (permalink)  
Старый 28.09.2018, 15:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

hash remove
Сообщение от Igorsrt
сложновато

<script>
    var hash = location.hash;
    if(hash){
      document.querySelector(hash).classList.add('w-current');
      history.replaceState({}, document.title, location.href.replace(hash, ''));
    }
</script>

Последний раз редактировалось рони, 28.09.2018 в 15:42.
Ответить с цитированием
  #9 (permalink)  
Старый 28.09.2018, 15:31
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

юзай пример рони )
Ответить с цитированием
  #10 (permalink)  
Старый 28.09.2018, 15:37
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

Сообщение от рони Посмотреть сообщение

<script>
    var hash = location.hash;
    if(hash){
      document.querySelector(hash).classList.add('w-current')
      history.replaceState({}, document.title, location.href.replace(hash, ''));
    }
</script>
нет, вот так не работает у меня... (якорь в ссылке пропадает, но и таб не переключается)
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как заставить барадатер открывать картинки-ссылки с js отправкой POST в новой вкладке Nikifor Элементы интерфейса 14 14.12.2017 07:27