Показать и скрыть элемент, когда URL содержит определенный фрагмент текста?

Содержание

Вопрос или проблема
Ответ или решение
Задача
Проблемы с текущим кодом
Исправленный код
Рекомендации по оптимизации
Заключение

Вопрос или проблема

Мне нужно, чтобы #nav1 отображался, а #nav2 скрывался на всех страницах, в URL которых содержится “/category-1/”.

Мне нужно, чтобы #nav2 отображался, а #nav1 скрывался на всех страницах, в URL которых содержится “/category-2/”.

У меня есть следующий код:

    <script>  

var url = window.location.href;

if (url.indexOf("/category-1/") > -1)
{
    document.getElementById('#nav1').style.display = 'none';
    document.getElementById('#nav2').style.display = 'true';
}

else if (url.indexOf("/category-2/") > -1)
{
    document.getElementById('#nav2').style.display = 'none';
    document.getElementById('#nav1').style.display = 'true';
}

</script>

Но, похоже, это не оказывает никакого эффекта.

Спасибо,
Майкл

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

Если оба меню по умолчанию настроены на отображение, то вам будет лучше добавить и удалить display: none;, вместо того чтобы устанавливать конкретное значение, когда оно отображается:

if (url.indexOf("/category-1/") > -1)
{
    document.getElementById('#nav1').style.display = 'none';
    document.getElementById('#nav2').style.display = '';
}

else if (url.indexOf("/category-2/") > -1)
{
    document.getElementById('#nav2').style.display = 'none';
    document.getElementById('#nav1').style.display = '';
}

Однако, если вы контролируете шаблоны вашей темы, вам будет лучше скрыть и показать правильное навигационное меню в шаблоне. Вы можете использовать is_category(), чтобы проверить, просматриваете ли вы архив конкретной категории, или has_category(), чтобы проверить, имеет ли текущая запись эту категорию:

<?php if ( is_category( 'category-1' ) || ( is_single() && has_category( 'category-1', get_queried_object() ) ) ) : ?>
    <nav id="nav1"></nav>
<?php elseif ( is_category( 'category-2' ) || ( is_single() && has_category( 'category-2', get_queried_object() ) ) ) : ?>
    <nav id="nav2"></nav>
<?php endif; ?>

Ответ или решение

Для решения задачи отображения элементов навигации в зависимости от наличия определенного текста в URL, необходимо учесть ряд важных моментов, касающихся как JavaScript, так и CSS. Давайте подробно рассмотрим шаги, которые помогут добиться нужного результата, а также внесем улучшения в ваш исходный код.

Задача

Элемент с id="nav1" должен отображаться, когда URL содержит /category-1/.
Элемент с id="nav2" должен отображаться, когда URL содержит /category-2/.

Проблемы с текущим кодом

Ваш исходный код содержит несколько ошибок, которые влияют на его работоспособность:

Неправильное использование метода getElementById:
- В getElementById нужно указывать id элемента без символа #. Например, вместо document.getElementById('#nav1'), должно быть document.getElementById('nav1').
Неправильные значения для установки display:
- Значение true не является допустимым для свойства CSS display. Оно должно быть block, flex, inline, и т.д. Чтобы скрыть элемент, используйте style.display = 'none', а чтобы показать, вместо установки можно просто удалить стиль, присвоив пустую строку style.display = '' (что равносильно значению по умолчанию).

Исправленный код

Вот исправленная версия вашего JavaScript-кода:

<script>
var url = window.location.href;

if (url.indexOf("/category-1/") > -1) {
    document.getElementById('nav1').style.display = 'block'; // Отобразить nav1
    document.getElementById('nav2').style.display = 'none'; // Скрыть nav2
} else if (url.indexOf("/category-2/") > -1) {
    document.getElementById('nav2').style.display = 'block'; // Отобразить nav2
    document.getElementById('nav1').style.display = 'none'; // Скрыть nav1
}
</script>

Рекомендации по оптимизации

Структура кода: Чтобы минимизировать количество ошибок и улучшить читаемость, рекомендуется структурировать код в отдельную функцию. Например:

<script>
function toggleNavigation() {
    var url = window.location.href;

    if (url.indexOf("/category-1/") > -1) {
        document.getElementById('nav1').style.display = 'block';
        document.getElementById('nav2').style.display = 'none';
    } else if (url.indexOf("/category-2/") > -1) {
        document.getElementById('nav2').style.display = 'block';
        document.getElementById('nav1').style.display = 'none';
    }
}

// Вызов функции при загрузке страницы
window.onload = toggleNavigation;
</script>

Пользовательский опыт: Убедитесь, что элементы навигации имеют стиль по умолчанию, чтобы они не отображались во время загрузки страницы (например, display: none; в CSS для обоих элементов). Это предотвращает мигание элементов на странице при загружаемом JavaScript.
Альтернативный подход: Если у вас есть доступ к шаблонам вашего сайта, рассмотрите возможность изменения структуры шаблона. Функции PHP is_category и has_category могут значительно упростить процесс в зависимости от контекста страницы. Пример использования:

<?php if ( is_category( 'category-1' ) || ( is_single() && has_category( 'category-1', get_queried_object() ) ) ) : ?>
    <nav id="nav1">Навигация для категории 1</nav>
<?php elseif ( is_category( 'category-2' ) || ( is_single() && has_category( 'category-2', get_queried_object() ) ) ) : ?>
    <nav id="nav2">Навигация для категории 2</nav>
<?php endif; ?>

Заключение

Следуя указанным рекомендациям, вы сможете добиться желаемого поведения элементов навигации на вашем веб-сайте. Приведенный код уже исправляет основные ошибки, а так же предлагает альтернативные решения, которые могут оказаться более удобными и эффективными с точки зрения производительности и пользовательского опыта. Не забывайте тестировать изменения на разных устройствах и браузерах для обеспечения корректной работы.