Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Открывать таб по ссылке на нужной вкладке (https://javascript.ru/forum/dom-window/75361-otkryvat-tab-po-ssylke-na-nuzhnojj-vkladke.html)

Igorsrt 28.09.2018 13:39

Открывать таб по ссылке на нужной вкладке
 
Здравствуйте! Есть сайт, сделанный на каком-то хитроумном конструкторе (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"... Воможно ли это?

SuperZen 28.09.2018 13:55

<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>

Igorsrt 28.09.2018 14:24

Цитата:

Сообщение от SuperZen (Сообщение 495528)
<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 в адресной строке?

SuperZen 28.09.2018 14:49

сменить location без перезагрузки страницы
https://stackoverflow.com/questions/...ading-the-page

Igorsrt 28.09.2018 14:59

Цитата:

Сообщение от SuperZen (Сообщение 495531)
сменить location без перезагрузки страницы
https://stackoverflow.com/questions/...ading-the-page

ну это сложновато для моего понимания (

рони 28.09.2018 15:02

SuperZen,
а если так?
<script>
    var hash = location.hash;
    hash && document.querySelector(hash).classList.add('w-current')
</script>

SuperZen 28.09.2018 15:24

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

рони 28.09.2018 15:27

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>

SuperZen 28.09.2018 15:31

юзай пример рони )

Igorsrt 28.09.2018 15:37

Цитата:

Сообщение от рони (Сообщение 495535)
:(
<script>
    var hash = location.hash;
    if(hash){
      document.querySelector(hash).classList.add('w-current')
      history.replaceState({}, document.title, location.href.replace(hash, ''));
    }
</script>

нет, вот так не работает у меня... (якорь в ссылке пропадает, но и таб не переключается) :(


Часовой пояс GMT +3, время: 11:23.