Открывать таб по ссылке на нужной вкладке
 

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

<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 в адресной строке?

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

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

SuperZen,
а если так?

<script>
    var hash = location.hash;
    hash && document.querySelector(hash).classList.add('w-current')
</script>

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

hash remove
 

:(

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

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

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

а в чем разница с прошлым примером? вроде все тоже самое: табы переключаются, якорь в адресной строке продолжает отображаться... ;)

Igorsrt,
скрипт вниз страницы

перед if(hash) посмотри что в hash? если там нет первым символом #, тогда замени на document.querySelector('#' + hash)....

не тот сниппет скопировал походу, тут три строки
history.replaceState... еще добавилось

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

так он внизу, на той странице где табы... правда jQuery ассинхронно подгружается - это может влиять?

Igorsrt,
пост №14 SuperZen, проверьте, и что консоль то писала?

вот так заработало, спасибо еще раз... якорь на секунду отображается в адресной строке, потом пропадает...
Интересно, а в чем заключался вариант Рони - у него всегда классные решения (жалко что у меня сейчас не сработало)

отличается тем, что var hash = location.hash возвращает hash без символа #, и потом запускается поиск элемента, но поскольку не указали что ищем элемент по id (в querySelector, как и jQ - надо явно указывать, что id это #, class это .), то поиск не находил элемент с id, например, tab1

тогда вот так и в самый верх

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

почему без #?

одно с другим не совпадает, может скопировали неудачно.

я сам сверху писал )

var hash = location.hash.substr(1);

) действительно, что это я

ладно, вроде бы забороли )

блин, тут еще один момент:
изначально класс "w--current" стоял на первом заголовке в самом html, после наших (ваших :) ) доработок я его убрал (т.к. скрипт по другому не работал)... теперь если просто зайти на страницу с табами (не по ссылке), то активный заголовок никак не выделяется визуально(т.к. нет у него css класса).
Получается нужно этот класс вернуть по умолчанию в разметку html и добавить в скрипт, что бы он его удалял при срабатывании

<script type="text/javascript">
    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
    })

</script>

думал, сам смогу, вставив в скрипт "$('#one').removeClass('w--current');" - но так он этот класс всегда удаляет (даже при переходе по обычной ссылке из меню)... нужно какое-то условие прописать

вот так вот сделал

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {

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

</script>

но, не уверен что это правильно )