Как поставить якорь на tab меню?

Question

[Антон Пархоменко]

В категории есть три иконки, которые вызываются кодом:

<div class="ttm-shop-icon">
		<div class="product-btn"><a href="[[~[[+id]]]]" class="add-to-cart-btn"><i class="ti ti-search"></i></a>
		</div>
		<div class="product-btn"><a href="[[~[[+id]]]]" class="search-btn"><i class="ti ti-ruler-pencil"></i></a>
		</div>
		<div class="product-btn"><a href="[[~[[+id]]]]" class="wishlist-btn"><i class="ti ti-email"></i></a>
		</div>
 </div>

Так как сделать ссылку для перехода в нужный пункт tab у товара с иконки на странице категории?
Код таба:

<div class="ttm-tabs tabs-for-single-products" data-effect="fadeIn">
	<ul class="tabs clearfix">
		<li class="tab active"><a href="#">Описание</a></li>
		<li class="tab"><a href="#">Технические характеристики</a></li>
		<li class="tab"><a href="#">Форма</a></li>
	</ul>
	<div class="content-tab ttm-bgcolor-white">
		<!-- content-inner -->
		<div class="content-inner">
			текст первой вкладки
		</div><!-- content-inner end-->
		<!-- content-inner -->
		<div class="content-inner">
			текст второй вкладки
		</div><!-- content-inner end-->
		<!-- content-inner -->
		<div class="content-inner">
			<div id="reviews" class="woocommerce-Reviews">
				<div id="comments">
					<h2>Заголовок</h2>
				</div>
				<div id="review_form_wrapper">
					<div class="comment-respond">
					 текст третьей вкладки
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Answer 1

[Шохрух Шаймардонов]

Самый простой вариант это триггерить событие клика
tabEl.click()

Comments

[Антон Пархоменко]

Простите, но в js я не силен. Знаю только html+css на уровне изменить дизайн.

[Шохрух Шаймардонов]

Антон Пархоменко, тогда меняйте структуру html. Других вариантов нет

[Шохрух Шаймардонов]

document.getElementById(hash)
По аналогии можете добавить класс / стили к нужному элементу

[Антон Пархоменко]

Шохрух Шаймардонов, спасибо, но я неправильно написал.
класс active добавляется не только вкладкам, но и блоку с содержимым.

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

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

</script>

Вот скрипт выше добавляет класс active вкладкам. А как сделать, чтобы этот класс добавлялся в <div class="content-inner">?

[Шохрух Шаймардонов]

document.querySelecrorAll('.content-inner')[n].classList.add('active')

[Антон Пархоменко]

Шохрух Шаймардонов, сделал так:

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
      var hash = location.hash.substr(1);
    if(hash){ $('#tab1').removeClass('active');}
      hash && document.getElementById(hash).classList.add('active') && document.querySelecrorAll('.content-inner')[n].classList.add('active')
      history.replaceState(null, null, window.location.href.replace(/#.*$/, ''));//replace state
    })
</script>

Но класс active все равно не хочет добавляется нужному блоку. Вкладка активна, а блок div нет. Помогите пожалуйста.

[Шохрух Шаймардонов]

Антон Пархоменко, вы вместо [n] укажите нужное число. я n специально не указывал

[Антон Пархоменко]

Шохрух Шаймардонов, тысяча извинений перед вами. Сам запутался и вас запутал.
В общем, тут проблема в другом.
При переходе по якорной ссылке, открывается новая страница с табом. Срабатывает скрипт и становится активной вкладкой таба именно та, которая соответствует якорю.
И <div class="content-inner" style="display: none;">
принимает значение

<div class="content-inner active" style="display: block;">

Вот именно это я и хочу сделать, чтобы отображалось содержимое вкладки по переходу по нужному якорю.

[Шохрух Шаймардонов]

Антон Пархоменко, и в таком случае пробуйте так: document.querySelecror('.content-inner').classList.add('active')

[Антон Пархоменко]

Шохрух Шаймардонов, Добрый день.
И в таком случае ничего не происходит.
Я правильно понимаю, что этот код
document.querySelecror('.content-inner').classList.add('active')
нужно добавить в эту строку
hash && document.getElementById(hash).classList.add('active') через &&?
То есть так:
hash && document.getElementById(hash).classList.add('active') && document.querySelecror('.content-inner').classList.add('active')

[Шохрух Шаймардонов]

Антон Пархоменко, вы все это как условие кидаете. А надо как тело условия