Как сделать ссылку по id?

HTML PHP

1 ответ

Не кидайтесь тухлыми помидорами, прошу.
Вводные:
Есть страница WP, на этой странице есть две вкладки "Было" и "Будет"
По умолчанию, при переходе на страницу из пункта меню, активная вкладка "Будет".
Задача:
Делаю кнопку на главной странице, для вкладки "Было"
Вопрос:
Как вывести (создать) ссылку по ID что бы при переходе по ссылке, активная вкладка была "Было"?
Другими словами:
Из пункта меню переходим на страницу - в этом случае, активная вкладка "Будет";
Переход по кнопке с главной страницы - активная вкладка "Было".
Проблема:
ссылка вида: домен/страница/#id не работает как надо мне
Вот сам код:

&lt;div class="tabs"&gt;   &lt;ul class="tab-menu tab-list"&gt;     &lt;li class="tab-list__item active"&gt;&lt;a href="#will-be"&gt;Будет&lt;/a&gt;&lt;/li&gt;     &lt;li&gt;&lt;a href="#was"&gt;Было&lt;/a&gt;&lt;/li&gt;   &lt;/ul&gt;    &lt;div class="tab-content active" id="will-be"&gt;     &lt;div class="rotate-block"&gt;       &lt;?php       $args = array(         'post_type' =&gt; 'cards', // Тип записи         'meta_type' =&gt; 'DATETIME',         'meta_query' =&gt; array(           array(             'key' =&gt; 'data_cont', // Поле даты             'value' =&gt; date('Y-m-d'), // Только даты, которые еще не наступили             'compare' =&gt; '&gt;=',             'type' =&gt; 'DATETIME'           )         ),         'posts_per_page' =&gt; -1,         'orderby' =&gt; 'meta_value_num',         'meta_key' =&gt; 'data_cont',         'order' =&gt; 'ASC'       );       $query = new WP_Query($args);        if ($query-&gt;have_posts()) :         while ($query-&gt;have_posts()) : $query-&gt;the_post();           get_template_part('template-parts/content', 'cards');         endwhile;         wp_reset_postdata();       else :         echo '&lt;p&gt;Нет записей для отображения&lt;/p&gt;';       endif;       ?&gt;     &lt;/div&gt;    &lt;/div&gt;    &lt;div class="tab-content" id="was"&gt;     &lt;div class="rotate-block"&gt;       &lt;?php       $args = array(         'post_type' =&gt; 'cards', // Тип записи         'meta_type' =&gt; 'DATETIME',         'meta_query' =&gt; array(           array(             'key' =&gt; 'data_cont', // Поле даты             'value' =&gt; date('Y-m-d'), // Только даты, которые уже прошли             'compare' =&gt; '&lt;',             'type' =&gt; 'DATETIME'           )         ),         'posts_per_page' =&gt; -1,         'orderby' =&gt; 'meta_value_num',         'meta_key' =&gt; 'data_cont',         'order' =&gt; 'DESC'       );       $query = new WP_Query($args);        if ($query-&gt;have_posts()) :         while ($query-&gt;have_posts()) : $query-&gt;the_post();           get_template_part('template-parts/content', 'cards');         endwhile;         wp_reset_postdata();       else :         echo '&lt;p&gt;Нет записей для отображения&lt;/p&gt;';       endif;       ?&gt;     &lt;/div&gt;     &lt;div class="load"&gt;       &lt;button id="show-more"&gt;Показать ещё&lt;/button&gt;     &lt;/div&gt;   &lt;/div&gt; &lt;/div&gt;

<div class="tabs"> <ul class="tab-menu tab-list"> <li class="tab-list__item active"><a href="#will-be">Будет</a></li> <li><a href="#was">Было</a></li> </ul> <div class="tab-content active" id="will-be"> <div class="rotate-block"> <?php $args = array( 'post_type' => 'cards', // Тип записи 'meta_type' => 'DATETIME', 'meta_query' => array( array( 'key' => 'data_cont', // Поле даты 'value' => date('Y-m-d'), // Только даты, которые еще не наступили 'compare' => '>=', 'type' => 'DATETIME' ) ), 'posts_per_page' => -1, 'orderby' => 'meta_value_num', 'meta_key' => 'data_cont', 'order' => 'ASC' ); $query = new WP_Query($args); if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post(); get_template_part('template-parts/content', 'cards'); endwhile; wp_reset_postdata(); else : echo '<p>Нет записей для отображения</p>'; endif; ?> </div> </div> <div class="tab-content" id="was"> <div class="rotate-block"> <?php $args = array( 'post_type' => 'cards', // Тип записи 'meta_type' => 'DATETIME', 'meta_query' => array( array( 'key' => 'data_cont', // Поле даты 'value' => date('Y-m-d'), // Только даты, которые уже прошли 'compare' => '<', 'type' => 'DATETIME' ) ), 'posts_per_page' => -1, 'orderby' => 'meta_value_num', 'meta_key' => 'data_cont', 'order' => 'DESC' ); $query = new WP_Query($args); if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post(); get_template_part('template-parts/content', 'cards'); endwhile; wp_reset_postdata(); else : echo '<p>Нет записей для отображения</p>'; endif; ?> </div> <div class="load"> <button id="show-more">Показать ещё</button> </div> </div> </div>

и js:

&lt;script&gt; 	document.addEventListener("DOMContentLoaded", function() { 		const tabMenuItems = document.querySelectorAll('.tab-menu li'); 		const tabContentItems = document.querySelectorAll('.tab-content');  		tabMenuItems.forEach((item, index) =&gt; { 			item.addEventListener('click', () =&gt; { 				// Удаляем класс active у всех элементов 				tabMenuItems.forEach((menuItem) =&gt; { 					menuItem.classList.remove('active'); 				}); 				tabContentItems.forEach((contentItem) =&gt; { 					contentItem.classList.remove('active'); 				});  				// Добавляем класс active к выбранной вкладке 				item.classList.add('active'); 				tabContentItems[index].classList.add('active'); 			}); 		}); 	}); &lt;/script&gt;

Дополнительно:

Очевидно, зависит от того как сделаны вкладки.

Aetae,

&lt;div class="tabs"&gt;   &lt;ul class="tab-menu tab-list"&gt;     &lt;li class="tab-list__item active"&gt;&lt;a href="#will-be"&gt;Будет&lt;/a&gt;&lt;/li&gt;     &lt;li&gt;&lt;a href="#was"&gt;Было&lt;/a&gt;&lt;/li&gt;   &lt;/ul&gt;      &lt;div class="tab-content active" id="will-be"&gt;     &lt;div class="rotate-block"&gt;       &lt;?php       $args = array(         'post_type' =&gt; 'cards', // Тип записи         'meta_type' =&gt; 'DATETIME',         'meta_query' =&gt; array(           array(             'key' =&gt; 'data_cont', // Поле даты             'value' =&gt; date('Y-m-d'), // Только даты, которые еще не наступили             'compare' =&gt; '&gt;=',             'type' =&gt; 'DATETIME'           )         ),         'posts_per_page' =&gt; -1,         'orderby' =&gt; 'meta_value_num',         'meta_key' =&gt; 'data_cont',         'order' =&gt; 'ASC'       );       $query = new WP_Query($args);        if ($query-&gt;have_posts()) :         while ($query-&gt;have_posts()) : $query-&gt;the_post();           get_template_part('template-parts/content', 'cards');         endwhile;         wp_reset_postdata();       else :         echo '&lt;p&gt;Нет записей для отображения&lt;/p&gt;';       endif;       ?&gt;     &lt;/div&gt;   &lt;/div&gt;    &lt;div class="tab-content" id="was"&gt;     &lt;div class="rotate-block"&gt;       &lt;?php       $args = array(         'post_type' =&gt; 'cards', // Тип записи         'meta_type' =&gt; 'DATETIME',         'meta_query' =&gt; array(           array(             'key' =&gt; 'data_cont', // Поле даты             'value' =&gt; date('Y-m-d'), // Только даты, которые уже прошли             'compare' =&gt; '&lt;',             'type' =&gt; 'DATETIME'           )         ),         'posts_per_page' =&gt; -1,         'orderby' =&gt; 'meta_value_num',         'meta_key' =&gt; 'data_cont',         'order' =&gt; 'DESC'       );       $query = new WP_Query($args);        if ($query-&gt;have_posts()) :         while ($query-&gt;have_posts()) : $query-&gt;the_post();           get_template_part('template-parts/content', 'cards');         endwhile;         wp_reset_postdata();       else :         echo '&lt;p&gt;Нет записей для отображения&lt;/p&gt;';       endif;       ?&gt;     &lt;/div&gt;   &lt;/div&gt;

Aetae, согласен с Вами! Добавил код, которым реализованы табы.
Понимаю, что следовало раньше это сделать.

Ответы:

Если я правильно понял, и проблема в том что на лендинге есть два блока и нужно пролистать до нужного до добавьте для блока id, а для кнопки href="id кнопки"

Доброго дня. Благодарю за ответ.
Вы почти правы, за исключением того, что это не лендинг, и вкладки находятся на бругой странице.
I_want_to_know, возможно нужно добавить небольшой js код, который будет считывать "id" из адресной строки и открывать нужную вкладку
maksam07, Мне кажется в этом нет необходимости. Пропишите в href="названиестраницы.html/id блока"
Я добавил код, которым реализованы табы.
Понимаю, что следовало раньше это сделать.

Как я понял переход не скролом к блоку идет, а блоки в виде табов
Можно тогда использовать запросы типо домен/страница/?blok=bylo
Потом на странице смотрим пришло нам blok=bylo или нет, и тогда уже делаем что надо
И через php можно и через js

Я добавил код, которым реализованы табы.
Понимаю, что следовало раньше это сделать.

I_want_to_know,
Делаем 2 ссылки

&lt;a href="домен/страница/"&gt;Будет&lt;/a&gt; &lt;a href="домен/страница/?was"&gt;Было&lt;/a&gt;

<a href="домен/страница/">Будет</a> <a href="домен/страница/?was">Было</a>

А вот сам код, может не самый элегантный, но рабочий

&lt;? $uri_parts = explode('?', $_SERVER['REQUEST_URI'], 2); ?&gt;  &lt;div class="tabs"&gt;   &lt;ul class="tab-menu tab-list"&gt;     &lt;li&lt;?php if($uri_parts != 'was'){ echo ' class="tab-list__item active"'; ?&gt;&gt;&lt;a href="#will-be"&gt;Будет&lt;/a&gt;&lt;/li&gt;     &lt;li&lt;?php if($uri_parts == 'was'){ echo ' class="tab-list__item active"'; ?&gt;&gt;&lt;a href="#was"&gt;Было&lt;/a&gt;&lt;/li&gt;   &lt;/ul&gt;    &lt;div class="tab-content&lt;?php if($uri_parts != 'was'){ echo ' active'; ?&gt;" id="will-be"&gt;     &lt;div class="rotate-block"&gt;       &lt;?php       $args = array(         'post_type' =&gt; 'cards', // Тип записи         'meta_type' =&gt; 'DATETIME',         'meta_query' =&gt; array(           array(             'key' =&gt; 'data_cont', // Поле даты             'value' =&gt; date('Y-m-d'), // Только даты, которые еще не наступили             'compare' =&gt; '&gt;=',             'type' =&gt; 'DATETIME'           )         ),         'posts_per_page' =&gt; -1,         'orderby' =&gt; 'meta_value_num',         'meta_key' =&gt; 'data_cont',         'order' =&gt; 'ASC'       );       $query = new WP_Query($args);        if ($query-&gt;have_posts()) :         while ($query-&gt;have_posts()) : $query-&gt;the_post();           get_template_part('template-parts/content', 'cards');         endwhile;         wp_reset_postdata();       else :         echo '&lt;p&gt;Нет записей для отображения&lt;/p&gt;';       endif;       ?&gt;     &lt;/div&gt;    &lt;/div&gt;    &lt;div class="tab-content&lt;?php if($uri_parts == 'was'){ echo ' active'; ?&gt;" id="was"&gt;     &lt;div class="rotate-block"&gt;       &lt;?php       $args = array(         'post_type' =&gt; 'cards', // Тип записи         'meta_type' =&gt; 'DATETIME',         'meta_query' =&gt; array(           array(             'key' =&gt; 'data_cont', // Поле даты             'value' =&gt; date('Y-m-d'), // Только даты, которые уже прошли             'compare' =&gt; '&lt;',             'type' =&gt; 'DATETIME'           )         ),         'posts_per_page' =&gt; -1,         'orderby' =&gt; 'meta_value_num',         'meta_key' =&gt; 'data_cont',         'order' =&gt; 'DESC'       );       $query = new WP_Query($args);        if ($query-&gt;have_posts()) :         while ($query-&gt;have_posts()) : $query-&gt;the_post();           get_template_part('template-parts/content', 'cards');         endwhile;         wp_reset_postdata();       else :         echo '&lt;p&gt;Нет записей для отображения&lt;/p&gt;';       endif;       ?&gt;     &lt;/div&gt;     &lt;div class="load"&gt;       &lt;button id="show-more"&gt;Показать ещё&lt;/button&gt;     &lt;/div&gt;   &lt;/div&gt; &lt;/div&gt;

<? $uri_parts = explode('?', $_SERVER['REQUEST_URI'], 2); ?> <div class="tabs"> <ul class="tab-menu tab-list"> <li<?php if($uri_parts != 'was'){ echo ' class="tab-list__item active"'; ?>><a href="#will-be">Будет</a></li> <li<?php if($uri_parts == 'was'){ echo ' class="tab-list__item active"'; ?>><a href="#was">Было</a></li> </ul> <div class="tab-content<?php if($uri_parts != 'was'){ echo ' active'; ?>" id="will-be"> <div class="rotate-block"> <?php $args = array( 'post_type' => 'cards', // Тип записи 'meta_type' => 'DATETIME', 'meta_query' => array( array( 'key' => 'data_cont', // Поле даты 'value' => date('Y-m-d'), // Только даты, которые еще не наступили 'compare' => '>=', 'type' => 'DATETIME' ) ), 'posts_per_page' => -1, 'orderby' => 'meta_value_num', 'meta_key' => 'data_cont', 'order' => 'ASC' ); $query = new WP_Query($args); if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post(); get_template_part('template-parts/content', 'cards'); endwhile; wp_reset_postdata(); else : echo '<p>Нет записей для отображения</p>'; endif; ?> </div> </div> <div class="tab-content<?php if($uri_parts == 'was'){ echo ' active'; ?>" id="was"> <div class="rotate-block"> <?php $args = array( 'post_type' => 'cards', // Тип записи 'meta_type' => 'DATETIME', 'meta_query' => array( array( 'key' => 'data_cont', // Поле даты 'value' => date('Y-m-d'), // Только даты, которые уже прошли 'compare' => '<', 'type' => 'DATETIME' ) ), 'posts_per_page' => -1, 'orderby' => 'meta_value_num', 'meta_key' => 'data_cont', 'order' => 'DESC' ); $query = new WP_Query($args); if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post(); get_template_part('template-parts/content', 'cards'); endwhile; wp_reset_postdata(); else : echo '<p>Нет записей для отображения</p>'; endif; ?> </div> <div class="load"> <button id="show-more">Показать ещё</button> </div> </div> </div>

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Ирина WP Ответ

Обычная ссылка вида /stranica/#id только прокручивает страницу к элементу с таким ID. Она сама не переключит вкладку, если ваша логика вкладок работает по классу active. Нужно при загрузке страницы прочитать hash из URL и активировать нужную вкладку JavaScript-ом.

Пример HTML:

&lt;ul class="tab-menu"&gt;
  &lt;li&gt;&lt;a href="#will-be" data-tab="will-be"&gt;Будет&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#was" data-tab="was"&gt;Было&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
 
&lt;div id="will-be" class="tab-panel active"&gt;...&lt;/div&gt;
&lt;div id="was" class="tab-panel"&gt;...&lt;/div&gt;

<ul class="tab-menu"> <li><a href="#will-be" data-tab="will-be">Будет</a></li> <li><a href="#was" data-tab="was">Было</a></li> </ul> <div id="will-be" class="tab-panel active">...</div> <div id="was" class="tab-panel">...</div>

JS:

function activateTab(tabId) {
  document.querySelectorAll('.tab-panel').forEach(function (panel) {
    panel.classList.toggle('active', panel.id === tabId);
  });
 
  document.querySelectorAll('.tab-menu a').forEach(function (link) {
    link.classList.toggle('active', link.dataset.tab === tabId);
  });
}
 
document.addEventListener('DOMContentLoaded', function () {
  const initialTab = window.location.hash.replace('#', '') || 'will-be';
  activateTab(initialTab);
 
  document.querySelectorAll('.tab-menu a[data-tab]').forEach(function (link) {
    link.addEventListener('click', function (event) {
      event.preventDefault();
      const tabId = link.dataset.tab;
      activateTab(tabId);
      history.replaceState(null, '', '#' + tabId);
    });
  });
});

Теперь ссылка с главной может вести на /stranica/#was, и вкладка «Было» станет активной после загрузки.

Если вкладки делает плагин или конструктор, у него может быть свой API или формат ссылок. Тогда лучше использовать его штатный способ. Но принцип тот же: hash в URL должен быть связан с переключением активного таба, а не только с якорной прокруткой.

Если вкладки находятся ниже по странице, после активации нужной вкладки можно дополнительно прокрутить пользователя к блоку вкладок. Но не делайте это мгновенно до загрузки изображений и шрифтов: иногда браузер промахивается по позиции. Безопаснее вызывать прокрутку после активации таба с небольшой задержкой или использовать scrollIntoView() для контейнера вкладок.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов Figma Баг с переносом слов в Figma? 0 ответов

Как сделать ссылку по id?

Дополнительно:

Ответы:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно