Как сделать клик на соответствующей вкладке при переходе по ссылке на другой странице?

Question

Есть две страницы одного сайта. На одной есть ссылки. На другой вкладке меню. Как я могу сделать клик на соответствующей вкладке при переходе по ссылке на другой странице? Я имею в виду меню, подобное изображенному на картинке. Мне нужно при нажатии на одну из ссылок активировать нужную вкладку на другой странице, соответствующую ссылке. Первая ссылка = первая вкладка, вторая ссылка = вторая вкладка и т. Д. c.

    let tab = function() {
        let tabNav = document.querySelectorAll('.tabItem');
        let tabContent = document.querySelectorAll('.tabsContent');
        let tabName;


        tabNav.forEach((item, i) => {
            item.addEventListener('click', selectTabNav)
        });
        function selectTabNav(){
            tabNav.forEach((item, i) => {
                item.classList.remove('tabItem-active');
            });
            this.classList.add('tabItem-active');
            tabName = this.getAttribute('data-tab-name');
            selectTabContent(tabName);
        }

        function selectTabContent(tabName) {
         tabContent.forEach(item => {
         item.classList.contains(tabName) ? item.classList.add('tabsContent-active') : item.classList.remove('tabsContent-active');
     })
 }

};
tab();

.tabsContent{
    display: none;
    width:150px;
    background-color: orange;
}
.tabsContent-active{
    display: block;
}

<!--//Page1//--> <br>

<a href="services-details.html" class="serviceBtn" id="btn1">Подробнее</a>
<a href="services-details.html" class="serviceBtn" id="btn2">Подробнее</a>
<a href="services-details.html" class="serviceBtn" id="btn3">Подробнее</a>

<br>
<!--//Page 2//-->  
<ul>
  <li class="tabItem tabItem-active" data-tab-name="tab-1">Tab1</li>
  <li class="tabItem" data-tab-name="tab-2">Tab2</li>
  <li class="tabItem" data-tab-name="tab-3">Tab3</li>
</ul>

<ul>
  <li class="tabsContent tab-1 tabsContent-active">1</li>
  <li class="tabsContent tab-2">2</li>
  <li class="tabsContent tab-3">3</li>
</ul>

<!-- begin snippet: js hide: false console: true babel: false -->

Answer 1

Ваш вопрос не ясен. Но я думаю, что вы хотите создать три <a> tags, которые могут ссылаться на соответствующие вкладки с другой страницы services-details. html.

Если я прав, тогда вам нужно предоставить идентификатор для href attribute:

<a href="services-details.html#id1" class="serviceBtn" id="btn1">Подробнее</a>

, а затем присвоить этот же идентификатор для li's or the div you are trying to link:

<li class="tabsContent tab-1 tabsContent-active" id="id1">1</li>

Это должно ссылаться на соответствующие вкладки. Если это не то, что вы искали, то я прошу прощения и проясняю себя. Спасибо.

Редактировать: Поскольку ваш вопрос теперь гораздо более понятен, похоже, ваш вопрос является дубликатом вопроса. Вот ссылка . Пожалуйста, посмотрите.