Как сделать якори на сайте с повторами id?

Question

[Андрей Широких]

Доброго времени суток.
Есть сайт, на нём есть мобильная версия и планшетная версия. Есть меню, единое для обоих версий, сделанное через плагин. И есть блоки с одинаковыми ID, общие по типу about, help ит.д.. Как сделать, чтобы с одного меню работали якори на разных версиях с разными блоками, но одинаковыми id? Плагин не позволяет сделать два меню(

Comments

[Ankhena]

Плагин не позволяет сделать два меню(

но одинаковыми id?

А спецификация не позволяет делать одинаковые id.

Из этого и исходите.

[Андрей Широких]

Ankhena, Я это понимаю. Но задал вопрос в общем виде, чтоб было понятнее. Есть какой-то выход из этой ситуации, чтобы не страдать?

[Ankhena]

Андрей Широких, Выход - не использовать одинаковые id.

Для начала разобраться как они появились и какую задачу пытались решать. И решить ее по-другому.

[Андрей Широких]

Ankhena, Если их не использовать, меню на какой-то из версий не будет работать. Я пытаюсь узнать универсальное решение на обе версии с одним меню на одни ссылки. Если это выполнимо только через изменение id через условие определенной ширины экрана, то это другой вопрос. Я не хочу просто к этому варианту переходить))

[Сергей delphinpro]

Андрей Широких, тут может быть только одно решение — перепишите свое меню так, чтобы оно работало по классам, а не идентификаторам.
Вообще использование идентификаторов в коде нужно сводить к нулю. От них больше проблем, чем пользы.

[Андрей Широких]

Сергей delphinpro, Правильно ли я понимаю, что это возможно только через js?

[Ankhena]

Андрей Широких, зачем нужно 2 блока с одинаковыми id="about" и т.д.?

[Андрей Широких]

Ankhena, Блоки в разных версиях. Меню одно на две версии. Если сделаю разные id, заработает что-то одно только. Вот и ищу обходные пути, чтобы использовать одно меню на две версии.

[Ankhena]

Андрей Широких, в чем различия блоков? Постарайтесь использовать адаптивную верстку, а не дублирование кода.

[Сергей delphinpro]

Андрей Широких, ну да, а у вас как?

[Андрей Широких]

Ankhena, О боже, а могли бы просто ответить - вариантов нет, исправляйте имеющиеся блоки и меню. Я ж написал, плагин не позволяет больше одного меню задействовать.. У меня как раз таки разные блоки. Но мне нужно, чтобы работали они по одному меню.

[Bersonazh]

Решений немного. Либо вы меняете id, либо дополняете существующие id и вешаете якоря на них.

[Андрей Широких]

Сергей delphinpro, Пока никак. Просто спрашиваю. Буду рыскать инфу тогда, авось что выйдет, спасибо за вариант.

[Ankhena]

Андрей Широких,

О боже, а могли бы просто ответить - вариантов нет, исправляйте имеющиеся блоки и меню.

Я вам сразу написала, что одинаковые id существовать не могут.
Вариантов решений полно.
Модифицировать меню, изменить блоки, удалить лишние и еще пачка, но мы не видим макет и того, точ у вас там вообще происходит.

У меня как раз таки разные блоки.

Я пытаюсь выяснить на кой черт разные блоки имеют одинаковые id.
Подозреваю, что блок один, просто выглядит по-разному и для этого сдублирован.

[Андрей Широких]

Ankhena, Это была стартовая точка, с одинаковыми id, чтобы было от чего отталкиваться в вопросе. Сейчас вообще о них забудьте))) У меня разные блоки с разными id сейчас, но плагин не позволяет мне задействовать более одного меню или же использовать разные ссылки в зависимости от ширины экрана. Жалко, что этот плагин единственный, который подошёл под кастомизацию под заказчика и другой я использовать не могу (либо придется с нуля что-то снова искать и переделывать). Вариант, предложенный выше, я даже не нагуглил, с якорями по классам, примеров нема..
Видится вариант создать скрипт с условием, что если разрешение экрана такое-то, то элемент меняет свой id. Это ведь возможно?

[Ankhena]

Андрей Широких,

Видится вариант создать скрипт с условием, что если разрешение экрана такое-то, то элемент меняет свой id. Это ведь возможно?

Да, конечно.

Еще вариант, что в блоке с id у вас лежат 2 других блока и уже их видимость вы меняете в зависимости от размера экрана.

Возможно, вашу задачу так и нужно решать, способами выше, но имею стойкое ощущение, что есть решения лучше, но нужно видеть всю картину целиком.

Answer 1

[Alex]

Я так почитал комментарии, и, Автор, вопрос ты задал крайне непонятно )) Если я правильно понял вашу проблему, то:
Да, по спецификации HTML на странице может быть только один элемент с уникальным ID. Следовательно любой код, браузер работает исходя из этого: Нужно проскролить к такому-то элементу. Находится первый подходящий. Поскольку предполагается что других таких быть не может -- поиск прекращается.
Вариантов решения у вас два:

1. Не вставлять одну из секций для устройств. например по условию wp_is_mobile.
   
2. На клиенте, удалять один из блоков посредством JS.
   

Comments

[Андрей Широких]

Второй вариант отличный, спасибо!
P.S. Излагаться мой конёк.